@charset "UTF-8";
@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto-condensed.css");
.bg-dark { background: #0f0f0f; }

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

#overview-top-nav { background: black; color: white; }

#hd { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; background: black; color: white; font-size: 16px; margin: 0; padding: 0; }
#hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; }
#hd ul, #hd li, #hd figure, #hd p { margin: 0; padding: 0; }
#hd figure { display: block; }
#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; }
#hd a { color: inherit; }
#hd img { display: block; height: auto; border: none; max-width: 72% !important; margin: 0 auto; }
#hd img.lazyLoad { opacity: 0; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; height: 50vh; }
#hd img.lazyLoad.lazyLoaded { height: auto; opacity: 1; }
#hd table { border-collapse: collapse; }

::selection { background: #8a8a8a; color: #fe2e3c; }

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

/* ---------- ANIMATIONS ---------- */
@-webkit-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-moz-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-ms-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@-o-keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
@keyframes colorrun { 0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(359deg); } }
.colorrun { -webkit-animation-delay: 0s; -webkit-animation-duration: 4s; -webkit-animation-name: colorrun; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 4s; -moz-animation-name: colorrun; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 4s; -o-animation-name: colorrun; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 4s; animation-name: colorrun; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; }

@-webkit-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-moz-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-ms-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-o-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes pulse { 50% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } }
@-moz-keyframes pulse { 50% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } }
@-ms-keyframes pulse { 50% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } }
@-o-keyframes pulse { 50% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } }
@keyframes pulse { 50% { -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } }
/* ---------- ACCERLERATION ------- */
@-webkit-keyframes arrow_2 { 0%, 30% { opacity: 0; }
  31%,100% { opacity: 1; } }
@-moz-keyframes arrow_2 { 0%, 30% { opacity: 0; }
  31%,100% { opacity: 1; } }
@-ms-keyframes arrow_2 { 0%, 30% { opacity: 0; }
  31%,100% { opacity: 1; } }
@-o-keyframes arrow_2 { 0%, 30% { opacity: 0; }
  31%,100% { opacity: 1; } }
@keyframes arrow_2 { 0%, 30% { opacity: 0; }
  31%,100% { opacity: 1; } }
@-webkit-keyframes arrow_3 { 0%, 40% { opacity: 0; }
  41%,100% { opacity: 1; } }
@-moz-keyframes arrow_3 { 0%, 40% { opacity: 0; }
  41%,100% { opacity: 1; } }
@-ms-keyframes arrow_3 { 0%, 40% { opacity: 0; }
  41%,100% { opacity: 1; } }
@-o-keyframes arrow_3 { 0%, 40% { opacity: 0; }
  41%,100% { opacity: 1; } }
@keyframes arrow_3 { 0%, 40% { opacity: 0; }
  41%,100% { opacity: 1; } }
@-webkit-keyframes arrow_4 { 0%, 50% { opacity: 0; }
  51%,100% { opacity: 1; } }
@-moz-keyframes arrow_4 { 0%, 50% { opacity: 0; }
  51%,100% { opacity: 1; } }
@-ms-keyframes arrow_4 { 0%, 50% { opacity: 0; }
  51%,100% { opacity: 1; } }
@-o-keyframes arrow_4 { 0%, 50% { opacity: 0; }
  51%,100% { opacity: 1; } }
@keyframes arrow_4 { 0%, 50% { opacity: 0; }
  51%,100% { opacity: 1; } }
@-webkit-keyframes arrow_5 { 0%, 80% { opacity: 0; }
  81%,100% { opacity: 1; } }
@-moz-keyframes arrow_5 { 0%, 80% { opacity: 0; }
  81%,100% { opacity: 1; } }
@-ms-keyframes arrow_5 { 0%, 80% { opacity: 0; }
  81%,100% { opacity: 1; } }
@-o-keyframes arrow_5 { 0%, 80% { opacity: 0; }
  81%,100% { opacity: 1; } }
@keyframes arrow_5 { 0%, 80% { opacity: 0; }
  81%,100% { opacity: 1; } }
/* ---------- TYPE SWIPER --------- */
@-webkit-keyframes btn_hover { 0% { filter: brightness(160%); }
  20% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { filter: brightness(60%); -moz-transform: scale(0.99, 0.99); -o-transform: scale(0.99, 0.99); -ms-transform: scale(0.99, 0.99); -webkit-transform: scale(0.99, 0.99); transform: scale(0.99, 0.99); }
  65% { -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% { filter: brightness(160%); } }
@-moz-keyframes btn_hover { 0% { filter: brightness(160%); }
  20% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { filter: brightness(60%); -moz-transform: scale(0.99, 0.99); -o-transform: scale(0.99, 0.99); -ms-transform: scale(0.99, 0.99); -webkit-transform: scale(0.99, 0.99); transform: scale(0.99, 0.99); }
  65% { -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% { filter: brightness(160%); } }
@-ms-keyframes btn_hover { 0% { filter: brightness(160%); }
  20% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { filter: brightness(60%); -moz-transform: scale(0.99, 0.99); -o-transform: scale(0.99, 0.99); -ms-transform: scale(0.99, 0.99); -webkit-transform: scale(0.99, 0.99); transform: scale(0.99, 0.99); }
  65% { -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% { filter: brightness(160%); } }
@-o-keyframes btn_hover { 0% { filter: brightness(160%); }
  20% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { filter: brightness(60%); -moz-transform: scale(0.99, 0.99); -o-transform: scale(0.99, 0.99); -ms-transform: scale(0.99, 0.99); -webkit-transform: scale(0.99, 0.99); transform: scale(0.99, 0.99); }
  65% { -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% { filter: brightness(160%); } }
@keyframes btn_hover { 0% { filter: brightness(160%); }
  20% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
  50% { filter: brightness(60%); -moz-transform: scale(0.99, 0.99); -o-transform: scale(0.99, 0.99); -ms-transform: scale(0.99, 0.99); -webkit-transform: scale(0.99, 0.99); transform: scale(0.99, 0.99); }
  65% { -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% { filter: brightness(160%); } }
@-webkit-keyframes swiper_nav { 0% { filter: brightness(160%); }
  50% { filter: brightness(60%); }
  100% { filter: brightness(160%); } }
@-moz-keyframes swiper_nav { 0% { filter: brightness(160%); }
  50% { filter: brightness(60%); }
  100% { filter: brightness(160%); } }
@-ms-keyframes swiper_nav { 0% { filter: brightness(160%); }
  50% { filter: brightness(60%); }
  100% { filter: brightness(160%); } }
@-o-keyframes swiper_nav { 0% { filter: brightness(160%); }
  50% { filter: brightness(60%); }
  100% { filter: brightness(160%); } }
@keyframes swiper_nav { 0% { filter: brightness(160%); }
  50% { filter: brightness(60%); }
  100% { filter: brightness(160%); } }
/* ---------- HARDWARE ------------ */
@-webkit-keyframes floating { 50% { -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } }
@-moz-keyframes floating { 50% { -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } }
@-ms-keyframes floating { 50% { -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } }
@-o-keyframes floating { 50% { -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } }
@keyframes floating { 50% { -moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px); } }
/* ---------- NETWORKING ---------- */
@-webkit-keyframes network_line { 0% { width: 0; }
  100% { width: 100%; } }
@-moz-keyframes network_line { 0% { width: 0; }
  100% { width: 100%; } }
@-ms-keyframes network_line { 0% { width: 0; }
  100% { width: 100%; } }
@-o-keyframes network_line { 0% { width: 0; }
  100% { width: 100%; } }
@keyframes network_line { 0% { width: 0; }
  100% { width: 100%; } }
/* ---------- VPN FUSIONS --------- */
@-webkit-keyframes vpn-text-1 { 0% { opacity: 0; }
  40% { opacity: 0; }
  41% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 1; } }
@-moz-keyframes vpn-text-1 { 0% { opacity: 0; }
  40% { opacity: 0; }
  41% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 1; } }
@-ms-keyframes vpn-text-1 { 0% { opacity: 0; }
  40% { opacity: 0; }
  41% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 1; } }
@-o-keyframes vpn-text-1 { 0% { opacity: 0; }
  40% { opacity: 0; }
  41% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 1; } }
@keyframes vpn-text-1 { 0% { opacity: 0; }
  40% { opacity: 0; }
  41% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 1; } }
@-webkit-keyframes vpn-text-2 { 0% { opacity: 1; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-moz-keyframes vpn-text-2 { 0% { opacity: 1; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-ms-keyframes vpn-text-2 { 0% { opacity: 1; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-o-keyframes vpn-text-2 { 0% { opacity: 1; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes vpn-text-2 { 0% { opacity: 1; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-webkit-keyframes vpn-mark { 0% { opacity: 0; }
  15% { opacity: 0; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-moz-keyframes vpn-mark { 0% { opacity: 0; }
  15% { opacity: 0; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-ms-keyframes vpn-mark { 0% { opacity: 0; }
  15% { opacity: 0; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-o-keyframes vpn-mark { 0% { opacity: 0; }
  15% { opacity: 0; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes vpn-mark { 0% { opacity: 0; }
  15% { opacity: 0; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; } }
@-webkit-keyframes vpn-red { 0% { width: 0%; }
  40% { width: 100%; }
  41% { width: 0%; }
  100% { width: 0%; } }
@-moz-keyframes vpn-red { 0% { width: 0%; }
  40% { width: 100%; }
  41% { width: 0%; }
  100% { width: 0%; } }
@-ms-keyframes vpn-red { 0% { width: 0%; }
  40% { width: 100%; }
  41% { width: 0%; }
  100% { width: 0%; } }
@-o-keyframes vpn-red { 0% { width: 0%; }
  40% { width: 100%; }
  41% { width: 0%; }
  100% { width: 0%; } }
@keyframes vpn-red { 0% { width: 0%; }
  40% { width: 100%; }
  41% { width: 0%; }
  100% { width: 0%; } }
@-webkit-keyframes crimson01 { 0% { width: 0; }
  40% { width: 0; }
  60% { width: 50%; }
  99% { width: 50%; }
  100% { width: 0%; } }
@-moz-keyframes crimson01 { 0% { width: 0; }
  40% { width: 0; }
  60% { width: 50%; }
  99% { width: 50%; }
  100% { width: 0%; } }
@-ms-keyframes crimson01 { 0% { width: 0; }
  40% { width: 0; }
  60% { width: 50%; }
  99% { width: 50%; }
  100% { width: 0%; } }
@-o-keyframes crimson01 { 0% { width: 0; }
  40% { width: 0; }
  60% { width: 50%; }
  99% { width: 50%; }
  100% { width: 0%; } }
@keyframes crimson01 { 0% { width: 0; }
  40% { width: 0; }
  60% { width: 50%; }
  99% { width: 50%; }
  100% { width: 0%; } }
@-webkit-keyframes crimson02 { 0% { width: 50%; }
  60% { width: 50%; }
  75% { width: 80%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@-moz-keyframes crimson02 { 0% { width: 50%; }
  60% { width: 50%; }
  75% { width: 80%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@-ms-keyframes crimson02 { 0% { width: 50%; }
  60% { width: 50%; }
  75% { width: 80%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@-o-keyframes crimson02 { 0% { width: 50%; }
  60% { width: 50%; }
  75% { width: 80%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@keyframes crimson02 { 0% { width: 50%; }
  60% { width: 50%; }
  75% { width: 80%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@-webkit-keyframes crimson03 { 0% { width: 25%; }
  75% { width: 25%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@-moz-keyframes crimson03 { 0% { width: 25%; }
  75% { width: 25%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@-ms-keyframes crimson03 { 0% { width: 25%; }
  75% { width: 25%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@-o-keyframes crimson03 { 0% { width: 25%; }
  75% { width: 25%; }
  99% { width: 80%; }
  100% { width: 0%; } }
@keyframes crimson03 { 0% { width: 25%; }
  75% { width: 25%; }
  99% { width: 80%; }
  100% { width: 0%; } }
/* ---------- mobile WIFI --------- */
@-webkit-keyframes wholeCircle { 0% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; } }
@-moz-keyframes wholeCircle { 0% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; } }
@-ms-keyframes wholeCircle { 0% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; } }
@-o-keyframes wholeCircle { 0% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes wholeCircle { 0% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; } }
@-webkit-keyframes wholeCircle_s { 0% { opacity: 0; }
  30% { opacity: 0; }
  60% { opacity: 1; } }
@-moz-keyframes wholeCircle_s { 0% { opacity: 0; }
  30% { opacity: 0; }
  60% { opacity: 1; } }
@-ms-keyframes wholeCircle_s { 0% { opacity: 0; }
  30% { opacity: 0; }
  60% { opacity: 1; } }
@-o-keyframes wholeCircle_s { 0% { opacity: 0; }
  30% { opacity: 0; }
  60% { opacity: 1; } }
@keyframes wholeCircle_s { 0% { opacity: 0; }
  30% { opacity: 0; }
  60% { opacity: 1; } }
/* ---------- color effect -------- */
@-webkit-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-moz-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-ms-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-o-keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@keyframes static { 0% { opacity: 1; }
  100% { opacity: 1; } }
@-webkit-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-moz-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-ms-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-o-keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@keyframes breathing { 0% { opacity: 1; }
  70% { opacity: 0; } }
@-webkit-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-moz-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-ms-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-o-keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@keyframes strobing { 0% { opacity: 1; }
  50% { opacity: 0; } }
@-webkit-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-moz-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-ms-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-o-keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@keyframes music { 0% { opacity: 1; }
  10% { opacity: .3; }
  40% { opacity: 1; }
  60% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: .3; } }
@-webkit-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-moz-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-ms-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-o-keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@keyframes cycle { 0% { background-color: red; }
  15% { background-color: orange; }
  30% { background-color: yellow; }
  45% { background-color: #00CB07; }
  60% { background-color: #07A9FF; }
  75% { background-color: #1044FF; }
  90% { background-color: #a12fd9; }
  100% { background-color: red; } }
@-webkit-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-moz-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-ms-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-o-keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@keyframes rainbow { 0% { background-position: 100% 0; }
  100% { background-position: 0 0; } }
@-webkit-keyframes 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 comet { 0% { z-index: -1; width: 200%; -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
  100% { z-index: -1; width: 200%; -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } }
@-moz-keyframes comet { 0% { z-index: -1; width: 200%; -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
  100% { z-index: -1; width: 200%; -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } }
@-ms-keyframes comet { 0% { z-index: -1; width: 200%; -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
  100% { z-index: -1; width: 200%; -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } }
@-o-keyframes comet { 0% { z-index: -1; width: 200%; -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
  100% { z-index: -1; width: 200%; -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } }
@keyframes comet { 0% { z-index: -1; width: 200%; -moz-transform: translate(-100%, 0); -o-transform: translate(-100%, 0); -ms-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }
  100% { z-index: -1; width: 200%; -moz-transform: translate(100%, 0); -o-transform: translate(100%, 0); -ms-transform: translate(100%, 0); -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } }
@-webkit-keyframes flash { 0% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@-moz-keyframes flash { 0% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@-ms-keyframes flash { 0% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@-o-keyframes flash { 0% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes flash { 0% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@-webkit-keyframes yoyo { 0% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  80% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  81% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); } }
@-moz-keyframes yoyo { 0% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  80% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  81% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); } }
@-ms-keyframes yoyo { 0% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  80% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  81% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); } }
@-o-keyframes yoyo { 0% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  80% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  81% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); } }
@keyframes yoyo { 0% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  80% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  81% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); } }
@-webkit-keyframes wave { 0% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  50% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); } }
@-moz-keyframes wave { 0% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  50% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); } }
@-ms-keyframes wave { 0% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  50% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); } }
@-o-keyframes wave { 0% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  50% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); } }
@keyframes wave { 0% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); }
  50% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-20%, -30%); -o-transform: translate(-20%, -30%); -ms-transform: translate(-20%, -30%); -webkit-transform: translate(-20%, -30%); transform: translate(-20%, -30%); }
  100% { z-index: -1; width: 150%; height: 180%; box-shadow: 0 0 100px 100px #000 inset; -moz-transform: translate(-120%, -30%); -o-transform: translate(-120%, -30%); -ms-transform: translate(-120%, -30%); -webkit-transform: translate(-120%, -30%); transform: translate(-120%, -30%); } }
@-webkit-keyframes starryNight { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes starryNight { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes starryNight { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes starryNight { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes starryNight { 0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes yoyo_after { 0% { left: -80%; }
  25% { left: 100%; }
  100% { left: 100%; } }
@-moz-keyframes yoyo_after { 0% { left: -80%; }
  25% { left: 100%; }
  100% { left: 100%; } }
@-ms-keyframes yoyo_after { 0% { left: -80%; }
  25% { left: 100%; }
  100% { left: 100%; } }
@-o-keyframes yoyo_after { 0% { left: -80%; }
  25% { left: 100%; }
  100% { left: 100%; } }
@keyframes yoyo_after { 0% { left: -80%; }
  25% { left: 100%; }
  100% { left: 100%; } }
@-webkit-keyframes event { 0% { background-color: #6c00ff;
    /*紫*/ }
  10% { background-color: #2a00ff;
    /*青*/ }
  30% { background-color: #0090ff;
    /*藍*/ }
  50% { background-color: #00ff4e;
    /*綠*/ }
  70% { background-color: #fff100;
    /*黃*/ }
  90% { background-color: #ff0c00;
    /*紅*/ }
  100% { background-color: #6c00ff;
    /*紫*/ } }
@-moz-keyframes event { 0% { background-color: #6c00ff;
    /*紫*/ }
  10% { background-color: #2a00ff;
    /*青*/ }
  30% { background-color: #0090ff;
    /*藍*/ }
  50% { background-color: #00ff4e;
    /*綠*/ }
  70% { background-color: #fff100;
    /*黃*/ }
  90% { background-color: #ff0c00;
    /*紅*/ }
  100% { background-color: #6c00ff;
    /*紫*/ } }
@-ms-keyframes event { 0% { background-color: #6c00ff;
    /*紫*/ }
  10% { background-color: #2a00ff;
    /*青*/ }
  30% { background-color: #0090ff;
    /*藍*/ }
  50% { background-color: #00ff4e;
    /*綠*/ }
  70% { background-color: #fff100;
    /*黃*/ }
  90% { background-color: #ff0c00;
    /*紅*/ }
  100% { background-color: #6c00ff;
    /*紫*/ } }
@-o-keyframes event { 0% { background-color: #6c00ff;
    /*紫*/ }
  10% { background-color: #2a00ff;
    /*青*/ }
  30% { background-color: #0090ff;
    /*藍*/ }
  50% { background-color: #00ff4e;
    /*綠*/ }
  70% { background-color: #fff100;
    /*黃*/ }
  90% { background-color: #ff0c00;
    /*紅*/ }
  100% { background-color: #6c00ff;
    /*紫*/ } }
@keyframes event { 0% { background-color: #6c00ff;
    /*紫*/ }
  10% { background-color: #2a00ff;
    /*青*/ }
  30% { background-color: #0090ff;
    /*藍*/ }
  50% { background-color: #00ff4e;
    /*綠*/ }
  70% { background-color: #fff100;
    /*黃*/ }
  90% { background-color: #ff0c00;
    /*紅*/ }
  100% { background-color: #6c00ff;
    /*紫*/ } }
@-webkit-keyframes eventTxt01 { 0% { opacity: 1; }
  10% { opacity: 1; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes eventTxt01 { 0% { opacity: 1; }
  10% { opacity: 1; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes eventTxt01 { 0% { opacity: 1; }
  10% { opacity: 1; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes eventTxt01 { 0% { opacity: 1; }
  10% { opacity: 1; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes eventTxt01 { 0% { opacity: 1; }
  10% { opacity: 1; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes eventTxt02 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 1; }
  50% { opacity: 1; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 0; } }
@-moz-keyframes eventTxt02 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 1; }
  50% { opacity: 1; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 0; } }
@-ms-keyframes eventTxt02 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 1; }
  50% { opacity: 1; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 0; } }
@-o-keyframes eventTxt02 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 1; }
  50% { opacity: 1; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 0; } }
@keyframes eventTxt02 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 1; }
  50% { opacity: 1; }
  70% { opacity: 0; }
  90% { opacity: 0; }
  100% { opacity: 0; } }
@-webkit-keyframes eventTxt03 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
@-moz-keyframes eventTxt03 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
@-ms-keyframes eventTxt03 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
@-o-keyframes eventTxt03 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes eventTxt03 { 0% { opacity: 0; }
  10% { opacity: 0; }
  30% { opacity: 0; }
  50% { opacity: 0; }
  70% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; } }
@-webkit-keyframes event01 { 0% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  10% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  30% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  50% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  70% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  90% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  100% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; } }
@-moz-keyframes event01 { 0% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  10% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  30% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  50% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  70% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  90% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  100% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; } }
@-ms-keyframes event01 { 0% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  10% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  30% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  50% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  70% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  90% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  100% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; } }
@-o-keyframes event01 { 0% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  10% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  30% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  50% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  70% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  90% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  100% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; } }
@keyframes event01 { 0% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  10% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  30% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  50% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  70% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  90% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  100% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; } }
@-webkit-keyframes event02 { 0% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  10% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  30% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  50% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  70% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  90% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  100% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; } }
@-moz-keyframes event02 { 0% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  10% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  30% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  50% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  70% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  90% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  100% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; } }
@-ms-keyframes event02 { 0% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  10% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  30% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  50% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  70% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  90% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  100% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; } }
@-o-keyframes event02 { 0% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  10% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  30% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  50% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  70% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  90% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  100% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; } }
@keyframes event02 { 0% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  10% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  30% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  50% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  70% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  90% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  100% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; } }
@-webkit-keyframes event03 { 0% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  10% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  30% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  50% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  70% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  90% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  100% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; } }
@-moz-keyframes event03 { 0% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  10% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  30% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  50% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  70% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  90% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  100% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; } }
@-ms-keyframes event03 { 0% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  10% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  30% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  50% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  70% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  90% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  100% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; } }
@-o-keyframes event03 { 0% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  10% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  30% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  50% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  70% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  90% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  100% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; } }
@keyframes event03 { 0% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; }
  10% { background-color: #fff100; box-shadow: 0 0 30px 30px #fff100; }
  30% { background-color: #ff0c00; box-shadow: 0 0 30px 30px #ff0c00; }
  50% { background-color: #6c00ff; box-shadow: 0 0 30px 30px #6c00ff; }
  70% { background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; }
  90% { background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; }
  100% { background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; } }
@font-face { font-family: 'ROGFontsv'; src: url("../fonts/ROGFontsv1.5-Regular.otf"), url("../fonts/ROGFontsv1.5-Regular.otf") format("embedded-opentype"), url("../fonts/ROG Fonts v1.6.1.ttf") format("opentype"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Xolonium'; src: url("../fonts/xolonium-Regular.ttf") format("opentype"), url("../fonts/xolonium-regular.eot"); font-weight: normal; font-style: normal; }
#hd { font-size: 16px; }
#hd h2 { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2.75em; line-height: 1.125; color: #ffffff !important; letter-spacing: 0; margin-bottom: .5em; word-break: normal; word-wrap: normal; }
#hd h3 { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2.25em; font-weight: normal; line-height: 1.25; text-transform: uppercase; color: #c5c6c5; margin-bottom: .5em; }
#hd .title-deco { text-align: center; position: relative; }
#hd .title-deco:before { content: ''; display: block; width: 100%; height: 4.5em; border: 3px solid #fe2e3c; position: absolute; }
#hd .title-deco h3 { display: inline-block; padding: 0 .5em; background: black; position: relative; z-index: 2; }
#hd .title-deco.start { margin-bottom: 3em; }
#hd .title-deco.start:before { border-bottom: none; top: 2.75em; }
#hd .title-deco.end { margin-top: 3em; margin-bottom: 5em; }
#hd .title-deco.end:before { border-top: none; bottom: 2.75em; }
#hd h4 { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.5em; font-weight: normal; line-height: 1.25; color: #ffffff; margin-bottom: .5em; }
#hd h4 small { font: inherit; font-size: .75em; }
#hd h5 { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 2em; font-weight: bold; color: #ffffff; margin: .5em 0; }
#hd h6 { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1em; font-weight: 400; color: #ffffff; }
#hd p, #hd small, #hd a, #hd li { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd p { font-size: 1em; font-weight: 300; line-height: 1.6; letter-spacing: .05em; }
#hd p.color-primary { font-weight: 400; }
#hd b { font-weight: bold; }
#hd small { font-size: 14px; line-height: 1.5; font-weight: 300; }
#hd blockquote { font-family: inherit; font-size: 1.5em; font-weight: 400; font-style: italic; line-height: 1.125; margin: .75em 0; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#hd .align-right { text-align: right; }
#hd .text-italic { font-style: italic; }
#hd .hd-uppercase { text-transform: uppercase; }
#hd .hd-nouppercase { text-transform: none; }
#hd a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; }
#hd a.txt-link:hover { color: white; }
#hd .color-primary { color: #fe2e3c !important; }
#hd .color-grey { color: #aaaaaa; }
#hd .font-title { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }

html[lang^="zh-"] #hd h2, html[lang^="zh-"] #hd h3 { font-weight: bold; }

@media screen and (max-width: 1440px) { #hd { font-size: 14px; } }
@media screen and (max-width: 1280px) { #hd h2 { font-size: 2.5em; }
  #hd h3 { font-size: 2em; }
  #hd .title-deco:before { height: 3.5em; }
  #hd .title-deco.start { margin-bottom: 2em; }
  #hd .title-deco.start:before { top: 1.5em; }
  #hd .title-deco.end { margin-top: 2em; margin-bottom: 4em; }
  #hd .title-deco.end:before { bottom: 1.5em; }
  #hd h4 { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd .title-deco:before { border-width: 2px; }
  #hd h4 { font-size: 1.125em; }
  #hd h5 { font-size: 1.5em; } }
@media screen and (max-width: 768px) { #hd h2 { font-size: 2.15em; }
  #hd h5 { font-size: 1em; } }
@media screen and (max-width: 620px) { #hd h2 { font-size: 1.75em; }
  #hd h3 { font-size: 1.6em; }
  #hd .title-deco:before { height: 2.5em; }
  #hd .title-deco.end { margin-bottom: 2em; }
  #hd h4 { font-size: 1em; } }
@media screen and (max-width: 480px) { #hd { font-size: 12px; }
  #hd small { font-size: 12px; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w800 { max-width: 800px; margin-left: auto; margin-right: auto; }
#hd .hd-w900 { max-width: 900px; margin-left: auto; margin-right: auto; }
#hd .hd-w900, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400 { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-mw900, #hd .hd-mw1000 { margin: 0 auto; }
#hd .hd-mw500 { max-width: 500px; }
#hd .hd-mw900 { max-width: 900px; }
#hd .hd-mw1000 { max-width: 1000px; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1300 { max-width: 1300px; }
#hd .hd-w1400 { max-width: 1400px; }
#hd .hd-col20 { width: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col35 { width: 35%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col90 { width: 90%; }
#hd .hd-col100 { width: 100%; }
#hd .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-middle { display: inline-block; vertical-align: middle; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }
#hd .align-items-center { align-items: center; }
#hd .align-items-start { align-items: flex-start; }
#hd .align-items-end { align-items: flex-end; }
#hd .justify-content-center { justify-content: center; }
#hd .justify-content-start { justify-content: flex-start; }
#hd .justify-content-end { justify-content: flex-end; }
#hd .justify-content-between { justify-content: space-between; }
#hd .justify-content-around { justify-content: space-around; }
#hd .hd-d-none { display: none; }
#hd .hd-d-block { display: block; }

@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; }
  #hd .hd-d-1023-block { display: block; }
  #hd .hd-d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; }
  #hd .hd-d-768-block { display: block; } }
@media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none; }
  #hd .hd-d-620-block { display: block; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none; }
  #hd .hd-d-480-block { display: block; } }
#hd .hd-btn { display: inline-block; font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.2em; letter-spacing: .06em; line-height: 1; padding: 1em 0; margin: .5em auto; background: url(../img/btn/btn-center.png) center center no-repeat; background-size: 100% 100%; 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 { -webkit-animation-delay: 0s; -webkit-animation-duration: 1.2s; -webkit-animation-name: btn_hover; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 1.2s; -moz-animation-name: btn_hover; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 1.2s; -o-animation-name: btn_hover; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1.2s; animation-name: btn_hover; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .hd-btn:before, #hd .hd-btn:after { content: ''; display: block; height: 100%; width: 70px; position: absolute; top: 0; background-repeat: no-repeat; background-size: 100% 100%; z-index: -1; }
#hd .hd-btn:before { left: -68px; background-image: url(../img/btn/btn-left.png); }
#hd .hd-btn:after { right: -68px; background-image: url(../img/btn/btn-right.png); }

@media screen and (max-width: 1023px) { #hd .hd-btn:hover { -webkit-animation-name: none; -moz-animation-name: none; -ms-animation-name: none; -o-animation-name: none; animation-name: none; } }
@media screen and (max-width: 768px) { #hd .hd-btn:before, #hd .hd-btn:after { width: 30px; }
  #hd .hd-btn:before { left: -28px; }
  #hd .hd-btn:after { right: -28px; } }
#hd .hd-icon-plus { display: inline-block; vertical-align: top; width: 1.25em; height: 1.25em; border-radius: 1em; border: 1px solid #fe2e3c; 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: #fe2e3c; 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); }

#scrollUp { position: fixed; right: 30px; bottom: 30px; width: 45px; height: 45px; text-align: center; cursor: pointer; border: 2px solid #fe2e3c; opacity: 0; }
#scrollUp.hd-show { opacity: 1; }
#scrollUp svg { display: block; position: absolute; margin: auto; top: 0; right: 0; bottom: 5px; left: 0; fill: #fe2e3c; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); }
#scrollUp:hover { background-color: #fe2e3c; }
#scrollUp:hover svg { fill: white; }

#hd .hd-cp { cursor: pointer; }

@media screen and (max-width: 620px) { #fp-nav { display: none; } }
#hd .owl-nav { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; }
#hd .owl-next, #hd .owl-prev { width: 30%; height: 100%; background: url(../img/icon/arrow-r.png) center center no-repeat; background-size: 20% auto; outline: none; position: absolute; top: 0; z-index: 3; cursor: pointer; pointer-events: all; -webkit-animation-delay: 0s; -webkit-animation-duration: 1.8s; -webkit-animation-name: swiper_nav; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 1.8s; -moz-animation-name: swiper_nav; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 1.8s; -o-animation-name: swiper_nav; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1.8s; animation-name: swiper_nav; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .owl-next { left: 90%; }
#hd .owl-prev { right: 90%; -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 .slider-type { margin: 1em 0; }
#hd .slider-type .owl-stage-outer { overflow: visible; }
#hd .slider-type .item { padding: 0 5% 2em; position: relative; -moz-transition: transform 0.25s ease, opacity 0.4s ease; -o-transition: transform 0.25s ease, opacity 0.4s ease; -webkit-transition: transform 0.25s ease, opacity 0.4s ease; transition: transform 0.25s ease, opacity 0.4s ease; }
#hd .slider-type .item > a { display: flex; align-items: stretch; justify-content: center; min-height: 500px; padding: 2em; background: black; border: 3px solid #fe2e3c; box-shadow: 0 0 8px 5px rgba(254, 46, 60, 0.65); position: relative; overflow: hidden; -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 .slider-type .item figure, #hd .slider-type .item .hd-content { -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 .slider-type .item figure { width: 110%; height: 100%; position: absolute; top: 0; left: -5%; background: center center no-repeat; background-size: cover; }
#hd .slider-type .item .hd-content { flex-wrap: wrap; align-content: flex-start; justify-content: center; align-content: center; width: 80%; margin: 0 auto; text-shadow: 0.1em 0.1em 0.25em black; position: relative; opacity: 0; }
#hd .slider-type .item h3 { width: 100%; font-size: 2.75em; line-height: 1.25; text-transform: none; color: white; }
#hd .slider-type .item b { display: block; font-size: 1.1em; font-weight: 500; letter-spacing: .018em; margin-bottom: .5em; }
#hd .slider-type .item small { display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; }
#hd .slider-type .item .btn-container { margin-bottom: 2em; opacity: 0; }
#hd .slider-type .owl-item:not(.center) .item { pointer-events: none; -moz-transform: scale(0.85, 0.85) translate(80%, 0); -o-transform: scale(0.85, 0.85) translate(80%, 0); -ms-transform: scale(0.85, 0.85) translate(80%, 0); -webkit-transform: scale(0.85, 0.85) translate(80%, 0); transform: scale(0.85, 0.85) translate(80%, 0); }
#hd .slider-type .owl-item:not(.center) .item figure { opacity: .25; }
#hd .slider-type .owl-item:not(.center) .item > a { border: 2px solid rgba(254, 46, 60, 0.65); box-shadow: 0 0 8px 5px rgba(162, 25, 33, 0.5); }
#hd .slider-type .center + .owl-item .item { -moz-transform: scale(0.85, 0.85) translate(-80%, 0); -o-transform: scale(0.85, 0.85) translate(-80%, 0); -ms-transform: scale(0.85, 0.85) translate(-80%, 0); -webkit-transform: scale(0.85, 0.85) translate(-80%, 0); transform: scale(0.85, 0.85) translate(-80%, 0); }
#hd .slider-type .center .item { opacity: 1; z-index: 2; }
#hd .slider-type .center .item .hd-content, #hd .slider-type .center .item .btn-container { display: flex; -webkit-animation-delay: 0.3s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeIn; -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.3s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeIn; -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.3s; -o-animation-duration: 0.4s; -o-animation-name: fadeIn; -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.3s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: cubic-bezier(0.5, 0.38, 0.22, 0.98); animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .slider-team .owl-next, #hd .slider-team .owl-prev { width: 3%; background-size: contain; }
#hd .slider-team .owl-next { left: 100%; }
#hd .slider-team .owl-prev { right: 100%; }
#hd .slider-team .item { padding: 2em 0; }
#hd .slider-team .hd-frame { width: 100%; padding: 28% .5em 30% 3em; position: relative; z-index: 2; }
#hd .slider-team .hd-frame h3, #hd .slider-team .hd-frame p, #hd .slider-team .hd-frame blockquote { opacity: 0; }
#hd .slider-team .hd-frame:before, #hd .slider-team .hd-frame:after { content: ''; display: block; width: 100%; height: 0; padding-bottom: 26.9058%; background: center top no-repeat; background-size: contain; position: absolute; left: 0; z-index: -1; }
#hd .slider-team .hd-frame:before { background-image: url(../img/team/border-top.jpg); top: 0; }
#hd .slider-team .hd-frame:after { background-image: url(../img/team/border-bottom.png); bottom: 0; }
#hd .slider-team .hd-frame .deco-left { width: 1px; height: 77%; background: rgba(254, 46, 60, 0.65); position: absolute; left: 3.1%; top: 10%; z-index: 2; }
#hd .slider-team .hd-frame .deco-left:after { content: ''; display: block; width: 12px; height: 12px; background: url(../img/team/border-point.png) 0 0 no-repeat; background-size: contain; position: absolute; top: 0; bottom: 0; margin: auto -5px; z-index: 2; }
#hd .slider-team .team-logo { width: 30%; position: absolute; top: -2em; right: 20%; }
#hd .slider-team .team-country { width: 22%; position: absolute; bottom: -2em; right: 0; z-index: 2; }
#hd .slider-team figure { margin-left: -5%; padding-bottom: 5%; }
#hd .slider-team .center .hd-frame h3 { -webkit-animation-delay: 0.25s; -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.25s; -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.25s; -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.25s; 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 .slider-team .center .hd-frame p { -webkit-animation-delay: 0.4s; -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.4s; -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.4s; -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.4s; 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 .slider-team .center .hd-frame blockquote { -webkit-animation-delay: 0.55s; -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.55s; -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.55s; -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.55s; 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; }

@media screen and (max-width: 1440px) { #hd .slider-type { width: 75%; margin: 0 auto; }
  #hd .slider-type .item > a { min-height: 450px; }
  #hd .slider-type .item h3 { font-size: 2.5em; }
  #hd .slider-team .hd-frame { padding-right: 3em; } }
@media screen and (max-width: 1280px) { #hd .slider-type .item > a { padding: 1.25em 2em 1.5em; min-height: 400px; }
  #hd .slider-type .item .hd-content { width: 90%; }
  #hd .slider-type .item small { width: 90%; }
  #hd .slider-type .item .btn-container { margin-bottom: .5em; } }
@media screen and (max-width: 1024px) { #hd .slider-type .item > a { padding: 1em 1em 1.5em; min-height: 380px; }
  #hd .slider-type .item small { width: 100%; }
  #hd .slider-team .hd-content { width: 45%; }
  #hd .slider-team .hd-frame { padding-bottom: 12%; }
  #hd .slider-team figure { width: 60%; } }
@media screen and (max-width: 768px) { #hd .owl-next { left: 88%; }
  #hd .owl-prev { right: 88%; }
  #hd .slider-type { width: 100%; margin-bottom: 2em; }
  #hd .slider-type .item { padding: 0 0 1em; }
  #hd .slider-type .item > a { padding: 1em 1em 1.5em; -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; }
  #hd .slider-type .item figure, #hd .slider-type .item .hd-content { -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; }
  #hd .slider-type .item .hd-content { width: 95%; }
  #hd .slider-type .owl-item:not(.center) .item { -moz-transform: scale(0.9, 0.9) translate(80%, 0); -o-transform: scale(0.9, 0.9) translate(80%, 0); -ms-transform: scale(0.9, 0.9) translate(80%, 0); -webkit-transform: scale(0.9, 0.9) translate(80%, 0); transform: scale(0.9, 0.9) translate(80%, 0); }
  #hd .slider-type .owl-item:not(.center) .item figure { opacity: .75; }
  #hd .slider-type .center + .owl-item .item { -moz-transform: scale(0.9, 0.9) translate(-80%, 0); -o-transform: scale(0.9, 0.9) translate(-80%, 0); -ms-transform: scale(0.9, 0.9) translate(-80%, 0); -webkit-transform: scale(0.9, 0.9) translate(-80%, 0); transform: scale(0.9, 0.9) translate(-80%, 0); }
  #hd .slider-team .item { flex-direction: column-reverse; }
  #hd .slider-team .hd-content { width: 100%; }
  #hd .slider-team .hd-frame { padding: 15% 5em 12%; }
  #hd .slider-team .hd-frame .deco-left { height: 65%; }
  #hd .slider-team .team-logo { width: 20%; right: 25%; top: -1.5em; }
  #hd .slider-team .team-country { width: 15%; bottom: -1.5em; }
  #hd .slider-team figure { width: 100%; margin: 0 0 -2em; } }
@media screen and (max-width: 480px) { #hd .slider-type .item > a { min-height: 200px; }
  #hd .slider-type .item .hd-content { width: 100%; }
  #hd .slider-type .item h3 { font-size: 2em; }
  #hd .slider-team .hd-frame { padding: 15% 2em 12%; }
  #hd .slider-team .hd-frame:before, #hd .slider-team .hd-frame:after { padding-bottom: 33%; }
  #hd .slider-team .hd-frame .deco-left { height: 65%; }
  #hd .slider-team .team-logo { width: 25%; right: 20%; top: -1em; }
  #hd .slider-team .team-country { width: 20%; right: 2%; } }
@media screen and (max-width: 320px) { #hd .slider-team .hd-frame .deco-left { height: 75%; } }
#hd .tab-primary, #hd .tab-primary > *, #hd .tab-category, #hd .tab-category > * { -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); }
#hd .hd-sec-hidden > div { display: none; }
#hd .hd-sec-hidden > div.hd-active { display: block; -webkit-animation-delay: 0s; -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: 0s; -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: 0s; -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: 0s; 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 .tab-pri-container { position: relative; min-height: 4em; margin-bottom: 2em; }
#hd .tab-cate-container { position: relative; min-height: 4.43em; }
#hd .tab-primary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; margin: 0 auto; position: relative; z-index: 2; }
#hd .tab-primary.hd-fixed { position: fixed; top: 0; left: 0; right: 0; }
#hd .tab-primary.hd-fixed:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; box-shadow: 0 0 0 10px black; }
#hd .tab-primary li { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 350px; height: 4em; font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.25em; text-align: center; text-transform: uppercase; padding: 0 1em 0 7em; margin: 0 .5em; background: black center center no-repeat; background-size: cover; color: #a21921; border: 1px solid #fe2e3c; box-shadow: 0 0 2px rgba(192, 13, 59, 0.25), 0 0 8px 5px rgba(192, 13, 59, 0.5); position: relative; overflow-y: hidden; 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 .tab-primary li:before { content: ''; width: 8em; height: 102%; background: #fe2e3c; position: absolute; top: -1%; left: -2em; opacity: .6; -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-primary li .icon { width: auto; height: 90%; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; opacity: .6; }
#hd .tab-primary li:hover { color: #fe2e3c; }
#hd .tab-primary li.hd-active { color: #fe2e3c; -moz-transform: scale(1.15, 1.15); -o-transform: scale(1.15, 1.15); -ms-transform: scale(1.15, 1.15); -webkit-transform: scale(1.15, 1.15); transform: scale(1.15, 1.15); z-index: 5; }
#hd .tab-primary li.hd-active:before { background: #fe2e3c; opacity: 1; }
#hd .tab-primary li.hd-active .icon { opacity: 1; }
#hd .tab-category { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.125em; text-transform: uppercase; background: black; box-shadow: 0 0 10px rgba(254, 46, 60, 0.65); position: relative; overflow: hidden; z-index: 5; -webkit-backface-visibility: hidden; }
#hd .tab-category.hd-fixed { position: fixed; top: 0; left: 0; right: 0; }
#hd .tab-category .hd-tag { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; width: 230px; margin-right: -10px; padding: 0 1em 0 2em; font-weight: bold; letter-spacing: .018em; background: url(../img/btn/bg-tag.png) 93% center no-repeat; background-size: auto 100%; position: relative; z-index: 2; }
#hd .tab-category ul { width: calc(100% - 220px); }
#hd .tab-category li { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; padding: .25em .5em; font: inherit; color: #a21921; position: relative; cursor: pointer; }
#hd .tab-category li:before { content: ''; display: block; width: 95%; height: 100%; background: #fe2e3c; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; -moz-transform: skew(-47deg, 0deg); -o-transform: skew(-47deg, 0deg); -ms-transform: skew(-47deg, 0deg); -webkit-transform: skew(-47deg, 0deg); transform: skew(-47deg, 0deg); -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
#hd .tab-category li:first-child:after { content: ''; display: block; width: 5em; height: 100%; background: #fe2e3c; position: absolute; top: 0; right: 90%; z-index: -1; opacity: 0; -moz-transform: skew(-47deg, 0deg); -o-transform: skew(-47deg, 0deg); -ms-transform: skew(-47deg, 0deg); -webkit-transform: skew(-47deg, 0deg); transform: skew(-47deg, 0deg); -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
#hd .tab-category li:hover { color: #fe2e3c; }
#hd .tab-category li:hover svg path { fill: #fe2e3c; }
#hd .tab-category li.hd-active { color: #fafafa; }
#hd .tab-category li.hd-active:before { opacity: 1; }
#hd .tab-category li.hd-active svg path { fill: #fafafa; }
#hd .tab-category li.hd-active:first-child:after { opacity: 1; }
#hd .tab-category li svg, #hd .tab-category li img { flex-shrink: 0; width: 3.5em; margin: 0 .5em 0 1em; }
#hd .tab-category li svg path, #hd .tab-category li img path { fill: #a21921; }
#hd .ending-menu { margin: 2em -2em 0; padding-bottom: 5em; }
#hd .ending-menu li { padding: 0 2em; }
#hd .ending-menu li a { display: flex; align-items: center; justify-content: center; max-width: 15em; height: 100%; font-weight: bold; }

@media screen and (max-width: 1500px) { #hd .tab-category .hd-tag { width: 220px; }
  #hd .tab-category ul { width: calc(100% - 210px); }
  #hd .tab-category li { font-size: .875em; padding: .5em 1em .5em .5em; } }
@media screen and (max-width: 1280px) { #hd .tab-cate-container { min-height: 4.1114em; }
  #hd .tab-category li { justify-content: center; text-align: center; padding: 1em; }
  #hd .tab-category li.hd-col25 { width: 30%; }
  #hd .tab-category li svg, #hd .tab-category li img { display: none; }
  #hd .tab-category li:before { left: .75em; }
  #hd .tab-category li:first-child:after { width: 4em; } }
@media screen and (max-width: 1024px) { #hd .tab-primary li { font-size: 1em; padding-left: 6em; }
  #hd .tab-primary li:before { width: 7em; } }
@media screen and (max-width: 1023px) { #hd .tab-cate-container { min-height: 2.8571em; }
  #hd .tab-category { box-shadow: none; overflow: visible; }
  #hd .tab-category:after { content: ''; display: block; width: 100%; height: 1px; background: #fe2e3c; position: absolute; bottom: 3px; left: 0; }
  #hd .tab-category .hd-tag { width: 180px; font-size: 12px; padding: 1em .5em 1em 2em; background-position: right top; position: absolute; top: calc(100% - 3px); left: 0; }
  #hd .tab-category .hd-tag br { display: none; }
  #hd .tab-category ul { width: 100%; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; }
  #hd .tab-category ul::-webkit-scrollbar { height: 3px; }
  #hd .tab-category ul::-webkit-scrollbar-track { background: transparent; }
  #hd .tab-category ul::-webkit-scrollbar-thumb { background: transparent; }
  #hd .tab-category ul::-webkit-scrollbar-thumb:hover { background: transparent; }
  #hd .tab-category li { width: 20%; min-width: 200px; min-height: 40px; font-size: 12px; padding: .5em 1em; }
  #hd .tab-category li:before { width: 110%; left: -5%; -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 .tab-category li svg, #hd .tab-category li img { display: none; }
  #hd .ending-menu li a { width: 75%; height: 100%; } }
@media screen and (max-width: 768px) { #hd .tab-primary li { width: 40%; }
  #hd .ending-menu { margin-left: 0; margin-right: 0; }
  #hd .ending-menu li a:before, #hd .ending-menu li a:after { width: 70px; }
  #hd .ending-menu li a:before { left: -68px; }
  #hd .ending-menu li a:after { right: -68px; } }
@media screen and (max-width: 620px) { #hd .tab-pri-container { min-height: 3.5em; margin-bottom: 1em; }
  #hd .tab-primary li { height: 3.5em; padding-left: 1em; margin: 0 .25em; }
  #hd .tab-primary li:before, #hd .tab-primary li .icon { display: none; }
  #hd .tab-category li { min-width: 180px; padding: .5em; }
  #hd .tab-category li:before { width: 100%; left: 0; -moz-transform: skew(0deg, 0deg); -o-transform: skew(0deg, 0deg); -ms-transform: skew(0deg, 0deg); -webkit-transform: skew(0deg, 0deg); transform: skew(0deg, 0deg); }
  #hd .ending-menu li { width: 100%; } }
@media screen and (max-width: 480px) { #hd .tab-category li { min-width: 60vw; } }
/* ---------- color effect --- */
.hd-rainbow, .hd-yoyo { height: 100%; background: #ff0000; background-size: 300%; 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-comet { background: #999; background-color: #999; background-image: -moz-linear-gradient(110deg, #999 0%, #999 20%, #ff0000 30%, #ff0000 60%, #999 80%); background-image: -webkit-linear-gradient(110deg, #999 0%, #999 20%, #ff0000 30%, #ff0000 60%, #999 80%); background-image: linear-gradient(110deg, #999 0%, #999 20%, #ff0000 30%, #ff0000 60%, #999 80%); box-shadow: 0 0 50px 100px #999; }

.hd-flash { background: #820303; background-color: #820303; background-image: -moz-linear-gradient(110deg, #820303 0%, #820303 28%, #ff0000 48%, #ff0000 61%, #820303 79%, #820303 100%); background-image: -webkit-linear-gradient(110deg, #820303 0%, #820303 28%, #ff0000 48%, #ff0000 61%, #820303 79%, #820303 100%); background-image: linear-gradient(110deg, #820303 0%, #820303 28%, #ff0000 48%, #ff0000 61%, #820303 79%, #820303 100%); }

.hd-flashbg { background-color: #820303 !important; -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: colorrun; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: colorrun; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: colorrun; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: colorrun; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }

.hd-yoyo:after { content: ""; position: absolute; width: 80%; height: 100%; left: -50%; background-color: rgba(255, 255, 255, 0); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 30%, white 70%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 30%, white 70%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, white 30%, white 70%, rgba(255, 255, 255, 0) 100%); -webkit-animation-delay: 0s; -webkit-animation-duration: 3s; -webkit-animation-name: yoyo_after; -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: yoyo_after; -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: yoyo_after; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 3s; animation-name: yoyo_after; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }

.hd-starry { background: #550000 !important; }

.starry_night { display: none; }
.starry_night li { width: 5%; height: 10%; background-color: #FFF; position: absolute; background: radial-gradient(circle, #ff0000, #ff0000, #990000, #550000, #550000); animation: breathing 3s infinite; opacity: 0; }
.starry_night li:nth-child(1) { width: 27%; height: 23%; left: 19%; top: 36%; -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; }
.starry_night li:nth-child(2) { width: 20%; height: 19%; left: 40%; top: 52.5%; -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -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: 2s; -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: 2s; -o-animation-name: breathing; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 2s; animation-name: breathing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.starry_night li:nth-child(3) { width: 27.5%; height: 40%; left: 16%; top: 59%; -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; }
.starry_night li:nth-child(4) { width: 20%; height: 21%; left: 64%; top: 64%; -webkit-animation-delay: 0s; -webkit-animation-duration: 2.5s; -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: 2.5s; -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: 2.5s; -o-animation-name: breathing; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 2.5s; animation-name: breathing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.starry_night li:nth-child(5) { width: 10%; height: 20%; left: 90%; top: 2%; -webkit-animation-delay: 0s; -webkit-animation-duration: 1s; -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: 1s; -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: 1s; -o-animation-name: breathing; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1s; animation-name: breathing; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }

.hd-event { position: relative; background: #6c00ff !important; -webkit-animation-delay: 0s; -webkit-animation-duration: 1s; -webkit-animation-name: event; -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: event; -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: event; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 1s; animation-name: event; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.hd-event span { position: absolute; display: block; height: 100%; }
.hd-event span.event01 { width: 65%; right: 0; background-color: #2a00ff; box-shadow: 0 0 30px 30px #2a00ff; -webkit-animation-delay: 0s; -webkit-animation-duration: 12s; -webkit-animation-name: event01; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 12s; -moz-animation-name: event01; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 12s; -o-animation-name: event01; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 12s; animation-name: event01; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.hd-event span.event02 { width: 45%; right: 0; background-color: #0090ff; box-shadow: 0 0 30px 30px #0090ff; -webkit-animation-delay: 0s; -webkit-animation-duration: 12s; -webkit-animation-name: event02; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 12s; -moz-animation-name: event02; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 12s; -o-animation-name: event02; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 12s; animation-name: event02; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.hd-event span.event03 { width: 30%; right: 0; background-color: #00ff4e; box-shadow: 0 0 30px 30px #00ff4e; -webkit-animation-delay: 0s; -webkit-animation-duration: 12s; -webkit-animation-name: event03; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 12s; -moz-animation-name: event03; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 12s; -o-animation-name: event03; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 12s; animation-name: event03; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }

.event-txt p { width: 100%; text-align: center; color: #fff; position: absolute; bottom: 0; opacity: 0; z-index: 3; display: none; }
.event-txt p.eventTxt01 { -webkit-animation-delay: 0s; -webkit-animation-duration: 12s; -webkit-animation-name: eventTxt01; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 12s; -moz-animation-name: eventTxt01; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 12s; -o-animation-name: eventTxt01; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 12s; animation-name: eventTxt01; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.event-txt p.eventTxt02 { -webkit-animation-delay: 0s; -webkit-animation-duration: 12s; -webkit-animation-name: eventTxt02; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 12s; -moz-animation-name: eventTxt02; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 12s; -o-animation-name: eventTxt02; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 12s; animation-name: eventTxt02; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.event-txt p.eventTxt03 { -webkit-animation-delay: 0s; -webkit-animation-duration: 12s; -webkit-animation-name: eventTxt03; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 12s; -moz-animation-name: eventTxt03; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 12s; -o-animation-name: eventTxt03; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 12s; animation-name: eventTxt03; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
.event-txt.hd-active { display: block; }
.event-txt.hd-active p { display: block; }

#hd .main-kv { padding-bottom: 8em; }
#hd .main-kv > figure { width: 100%; height: 0; padding-bottom: 39.375%; position: relative; overflow: hidden; }
#hd .main-kv h2 { position: absolute; top: 0; left: 0; right: 0; margin: 7% auto 0; z-index: 2; }
#hd .main-menu { margin: -7% -1.25em 0; }
#hd .main-menu li { padding: 0 1.25em; }
#hd .main-menu figure { margin-bottom: 1em; position: relative; overflow: hidden; }
#hd .main-menu img { width: 100%; -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }
#hd .main-menu a:first-child:hover img { -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }
#hd .main-menu a:last-child { display: block; font-size: 1.25em; letter-spacing: .05em; margin-top: .875em; }

@media screen and (max-width: 1440px) { #hd .main-menu { margin-top: -5%; } }
@media screen and (max-width: 1024px) { #hd .main-menu li { padding: 0 .75em; }
  #hd .main-menu h4 { padding: 0 1em; } }
@media screen and (max-width: 1023px) { #hd .main-menu li { width: 50%; max-width: 300px; } }
@media screen and (max-width: 768px) { #hd .main-kv h2 { margin-top: 24%; }
  #hd .main-kv > figure { padding-bottom: 100%; }
  #hd .main-menu { margin: -7% -.5em 0; }
  #hd .main-menu li { padding: 0 .5em; }
  #hd .main-menu h4 { padding: 0; } }
@media screen and (max-width: 620px) { #hd .main-kv { padding-bottom: 3em; }
  #hd .main-menu li { padding: 0 .125em; } }
@media screen and (max-width: 480px) { #hd .main-menu li { margin: 0 auto 1em; }
  #hd .main-menu figure { margin-bottom: .5em; } }
#hd [class^="sec-"] { padding: 5em 0; }
#hd [class^="sec-"] { min-height: 50vh; }
#hd .sec-ecosystem { padding: 0 !important; }
#hd .sec-gamefirst .container { margin-bottom: -18%; position: relative; z-index: 2; }
#hd .sec-awards h3 { margin-bottom: 8%; }
#hd .sec-awards .hd-frame { position: relative; }
#hd .sec-awards .hd-frame:before, #hd .sec-awards .hd-frame:after { content: ''; display: block; width: 100%; height: 0; padding-bottom: 8.0268%; background: url(../img/awards/border.png) 0 0 no-repeat; background-size: contain; position: absolute; left: 0; }
#hd .sec-awards .hd-frame:before { bottom: 100%; }
#hd .sec-awards .hd-frame:after { top: 95%; -moz-transform: scale(1, -1); -o-transform: scale(1, -1); -ms-transform: scale(1, -1); -webkit-transform: scale(1, -1); transform: scale(1, -1); }
#hd .sec-awards figure { padding: 0em 2em; }
#hd .sec-awards figure .hd-deco { width: calc(100% - 4px); height: calc(95% - 10px); position: absolute; top: 5px; left: 1px; border-left: 1px solid #fe2e3c; border-right: 1px solid #fe2e3c; opacity: .5; pointer-events: none; }
#hd .sec-awards figure li { display: none; }
#hd .sec-awards figure li img, #hd .sec-awards figure li h5, #hd .sec-awards figure li p { opacity: 0; }
#hd .sec-awards figure li.hd-active { display: block; }
#hd .sec-awards figure li.hd-active img { -webkit-animation-delay: 0s; -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: 0s; -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: 0s; -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: 0s; 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 .sec-awards figure li.hd-active h5 { -webkit-animation-delay: 0.3s; -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.3s; -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.3s; -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.3s; 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 .sec-awards figure li.hd-active p { -webkit-animation-delay: 0.4s; -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.4s; -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.4s; -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.4s; 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 .sec-awards h5 { font-size: 1.5em; margin: 0 0 .125em; }
#hd .sec-awards h5.color-primary { font-size: 1.25em; font-style: italic; margin-top: .5em; }
#hd .sec-awards .hd-content { padding-left: 2%; margin: -3% 0; }
#hd .sec-awards .hd-content li.hd-active .hd-award:after { opacity: 1; }
#hd .sec-awards .hd-content li.hd-active p { color: #fe2e3c; font-weight: bold; }
#hd .sec-awards .hd-content .hd-award { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; background: #1a1a1a; margin-bottom: 5px; position: relative; overflow: hidden; }
#hd .sec-awards .hd-content .hd-award:after { content: ''; display: block; width: calc(100% - 4px); height: calc(100% - 4px); position: absolute; top: 0; left: 0; border: 2px solid #a21921; opacity: 0; z-index: 3; pointer-events: none; }
#hd .sec-awards .hd-content .hd-award img { width: 180px; border: .25em solid #1a1a1a; margin: 0; position: relative; z-index: 2; }
#hd .sec-awards .hd-content .hd-award p { max-width: calc(100% - 180px); padding: .25em 1em; position: relative; z-index: 2; }
#hd .sec-awards .hd-content .hd-award p p { line-height: 1.25; }
#hd #ROG-Gaming-Router .sec-awards figure li img { width: 70%; margin: -3% auto; }
#hd #ROG-Gaming-Router .sec-awards .hd-content .hd-award { margin-bottom: 18px; }
#hd #gf5_faster { width: 600px; margin: 2em auto; text-align: left; }
#hd #gf5_faster .hd-infoBar { margin-bottom: 5px; }
#hd #gf5_faster .hd-infoBar > img { width: 70px; display: inline-block; vertical-align: middle; }
#hd #gf5_faster .hd-infoBar .bar-container { width: calc(100% - 70px); display: inline-block; vertical-align: middle; margin-right: -5px; position: relative; }
#hd #gf5_faster .hd-infoBar h4 { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; font-size: 1.65em; font-weight: bold; font-style: italic; line-height: .875; margin-bottom: 0; text-transform: none; white-space: nowrap; position: absolute; top: -2px; left: 28%; }
#hd #gf5_faster .hd-infoBar .bar, #hd #gf5_faster .hd-infoBar p { display: inline-block; vertical-align: baseline; margin-bottom: 0; }
#hd #gf5_faster .hd-infoBar .bar { background: #808080; font-size: 12px; text-align: center; padding: 2px 0 1px; margin: 0 2em 0 1em; position: relative; }
#hd #gf5_faster .hd-infoBar .bar:after { content: ''; display: block; width: 20px; height: 100%; position: absolute; top: 0; right: -10px; background: #808080; -moz-transform: skew(45deg, 0deg); -o-transform: skew(45deg, 0deg); -ms-transform: skew(45deg, 0deg); -webkit-transform: skew(45deg, 0deg); transform: skew(45deg, 0deg); }
#hd #gf5_faster .hd-infoBar .bar.red { background: #fe2e3c; }
#hd #gf5_faster .hd-infoBar .bar.red:before { content: ''; display: block; width: 32px; height: 32px; background: url(../img/icon/thumbup.png) center center no-repeat; background-size: contain; position: absolute; top: -25px; right: 0; z-index: 2; }
#hd #gf5_faster .hd-infoBar .bar.red:after { background: #fe2e3c; }
#hd #gf5_faster small { display: block; margin-top: 10px; }
#hd .sec-comparision table { width: 100%; margin: 3em 0; }
#hd .sec-comparision th, #hd .sec-comparision td { padding: .65em 1em; border: 1px solid #fafafa; text-align: center; }
#hd .sec-comparision th { font-size: 1.125em; letter-spacing: .018em; background: rgba(254, 46, 60, 0.65); }
#hd .sec-comparision td { font-family: "Xolonium", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; }
#hd .sec-comparision td:first-child, #hd .sec-comparision td.tdStyle { font-family: "Roboto Condensed", "Microsoft Jhenghei", "Microsoft YaHei", "Arial", sans-serif; text-align: left; background: rgba(162, 25, 33, 0.5); }
#hd .sec-comparision td.tdStyle { background: rgba(162, 25, 33, 0.25); }
#hd .sec-comparision td img { display: inline-block; vertical-align: bottom; height: 1.5em; }
#hd .sec-types { background: center center no-repeat; background-size: auto 100%; position: relative; overflow: hidden; }

@media screen and (max-width: 1280px) { #hd [class^="sec-"] { padding: 3em 0; }
  #hd #gf5_faster { width: 440px; }
  #hd #gf5_faster .hd-infoBar .bar.red:before { width: 28px; height: 28px; top: -22px; }
  #hd #gf5_faster .hd-infoBar h4 { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd .sec-awards h5.color-primary { margin-bottom: 1em; }
  #hd .sec-awards .hd-content .hd-award img { width: 140px; border: none; }
  #hd .sec-awards .hd-content .hd-award p { max-width: calc(100% - 140px); }
  #hd .sec-comparision th, #hd .sec-comparision td { padding: .5em .75em; }
  #hd .sec-comparision th { font-size: 1em; font-weight: normal; }
  #hd .sec-comparision td:first-child { min-width: 7em; } }
@media screen and (max-width: 1023px) { #hd [class^="sec-"] { padding: 5em 0 3em; }
  #hd .sec-awards h5.color-primary { margin-bottom: .5em; }
  #hd .sec-awards .hd-frame:before, #hd .sec-awards .hd-frame:after { position: relative; }
  #hd .sec-awards .hd-content { width: 100%; max-width: 600px; margin: 0 auto; }
  #hd .sec-awards .hd-content li.hd-active .hd-award:before { -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
  #hd .sec-awards .hd-content li.hd-active .hd-pd_m { display: block; -webkit-animation-delay: 0s; -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: 0s; -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: 0s; -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: 0s; 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 .sec-awards .hd-content .hd-award { padding: 3px 0; }
  #hd .sec-awards .hd-content .hd-award:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 5px 0 5px; border-color: #fe2e3c transparent transparent transparent; position: absolute; right: 0; top: 0; bottom: 0; margin: auto .5em; -moz-transition: transform 0.4s ease; -o-transition: transform 0.4s ease; -webkit-transition: transform 0.4s ease; transition: transform 0.4s ease; }
  #hd .sec-awards .hd-content .hd-pd_m { display: none; margin-top: -5px; margin-bottom: 1em; }
  #hd .sec-awards .hd-content .hd-pd_m img { width: 60%; min-width: 250px; }
  #hd #ROG-Gaming-Router .sec-awards figure li img { width: 100%; margin: 0 auto; }
  #hd #ROG-Gaming-Router .sec-awards .hd-content .hd-award { margin-bottom: 5px; } }
@media screen and (max-width: 768px) { #hd .sec-gamefirst { position: relative; overflow: hidden; }
  #hd .sec-gamefirst > img { width: 120%; max-width: none !important; margin-left: -10%; } }
@media screen and (max-width: 620px) { #hd .sec-awards, #hd .sec-comparision, #hd .sec-types { padding: 2em 0 !important; }
  #hd .sec-comparision table { font-size: 12px; }
  #hd .sec-comparision th, #hd .sec-comparision td { padding: 0.5em; }
  #hd .sec-comparision td.tdStyle { min-width: 7em; } }
@media screen and (max-width: 480px) { #hd .sec-gamefirst > img { width: 140%; margin-left: -20%; }
  #hd #gf5_faster { width: 300px; }
  #hd #gf5_faster .hd-infoBar > img { width: 40px; }
  #hd #gf5_faster .hd-infoBar .bar-container { width: calc(100% - 40px); }
  #hd #gf5_faster .hd-infoBar .bar { margin-left: 0; }
  #hd #gf5_faster .hd-infoBar .bar.red:before { width: 20px; height: 20px; top: -18px; }
  #hd #gf5_faster .hd-infoBar h4 { font-size: 1em; line-height: 1.5; }
  #hd #gf5_faster .hd-infoBar p { font-size: 12px; }
  #hd .sec-comparision th, #hd .sec-comparision td { padding: .5em .25em; }
  #hd .sec-comparision td:first-child, #hd .sec-comparision td.tdStyle { min-width: 6em; } }
#hd #lighting { background-image: url(../img/ecosystem/lighting-bg.jpg); background-size: 50% auto; background-repeat: no-repeat; background-position: left top; padding: 40px 0 150px; }
#hd #lighting .lighting_control { position: relative; z-index: 5; }
#hd #lighting .lighting_effect { position: relative; z-index: 2; }
#hd #lighting .hd-lighting { height: 100%; position: relative; overflow: hidden; }
#hd #lighting .hd-controls { display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: -5%; position: relative; }
#hd #lighting .hd-controls li { width: calc(100% / 6); cursor: pointer; opacity: .5; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }
#hd #lighting .hd-controls li:hover, #hd #lighting .hd-controls li.hd-active { opacity: 1; }
#hd #lighting .hd-controls li img { display: block; width: 90%; max-width: 65px !important; margin: 20px auto 10px; }
#hd #colorbox { width: 98%; height: 98%; position: absolute; top: 1%; left: 1%; z-index: -1; overflow: hidden; }
#hd #color, #hd #greybg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#hd #greybg { background-color: #999; z-index: -2; }
#hd #colorpicker { position: absolute; bottom: -130px; left: 0; }
#hd #colorpicker:after { content: ""; width: 82px; height: 82px; background: black; border-radius: 50%; overflow: hidden; position: absolute; top: 14px; left: 14px; }

@media screen and (max-width: 1280px) { #hd #lighting { padding: 40px 0 80px; }
  #hd #lighting .lighting_control { padding-bottom: 80px; }
  #hd #colorpicker { bottom: -60px; left: 0; } }
@media screen and (max-width: 1023px) { #hd #lighting .lighting_control { padding-bottom: 0; }
  #hd #colorpicker { display: none !important; } }
@media screen and (max-width: 768px) { #hd #lighting { padding: 10px 0 0px; }
  #hd #lighting .flex-nowrap { flex-wrap: wrap; }
  #hd #lighting .lighting_control, #hd #lighting .lighting_effect { width: 100%; text-align: center; }
  #hd #lighting .hd-controls { justify-content: center; margin-left: 0; }
  #hd #lighting .lighting_effect { max-width: 450px; margin: 0 auto; margin-top: 12px; } }
#hd { /* PC GAMER */ }
#hd .sec-acceleration .hd-bar { display: flex; align-items: center; width: 80%; padding: 3em 0; margin: 0 auto; }
#hd .sec-acceleration .hd-bar h6 { width: 7em; white-space: nowrap; }
#hd .sec-acceleration .hd-bar small { font-weight: 500; opacity: 0; white-space: nowrap; }
#hd .sec-acceleration .hd-bar .bar { width: 80%; height: 1em; margin: 0 1.5em 0 2%; position: relative; background-color: black; background-image: -moz-linear-gradient(90deg, black, #fe2e3c); background-image: -webkit-linear-gradient(90deg, black, #fe2e3c); background-image: linear-gradient(90deg, black, #fe2e3c); -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -webkit-transition: all 0.8s ease; transition: all 0.8s ease; }
#hd .sec-acceleration .hd-bar .bar:after { content: ''; display: block; border-bottom: 1em solid #fe2e3c; border-right: 1em solid transparent; position: absolute; right: calc(-1em + 1px); }
#hd .sec-acceleration .hd-bar.is-animated small { opacity: 1; -moz-transition: all 0.6s 0.6s ease; -o-transition: all 0.6s 0.6s ease; -webkit-transition: all 0.6s 0.6s ease; transition: all 0.6s 0.6s ease; }
#hd .sec-acceleration .hd-bar.is-animated .bar { width: 10%; }
#hd .sec-acceleration .hd-content { position: relative; z-index: 2; }
#hd .sec-acceleration .hd-content li { padding: 0 1em; }
#hd .sec-acceleration .hd-content li:nth-child(2) { padding-left: 4%; }
#hd .sec-acceleration h4 { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; line-height: 1; }
#hd .sec-acceleration h4 img { margin: 0; }
#hd .sec-acceleration h4 span { display: block; padding-left: .5em; }
#hd #acceleration-container { margin-bottom: -2.5%; position: relative; overflow: hidden; }
#hd #acceleration-container .hd-mark { position: absolute; top: 0; left: 0; }
#hd #acceleration-container .arrow-2 { -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: arrow_2; -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: arrow_2; -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: arrow_2; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 2s; animation-name: arrow_2; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #acceleration-container .arrow-3 { left: .9%; -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: arrow_3; -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: arrow_3; -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: arrow_3; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 2s; animation-name: arrow_3; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #acceleration-container .arrow-4 { left: 1.7%; -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: arrow_4; -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: arrow_4; -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: arrow_4; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 2s; animation-name: arrow_4; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #acceleration-container .arrow-5 { left: 2.5%; -webkit-animation-delay: 0s; -webkit-animation-duration: 4s; -webkit-animation-name: arrow_5; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 4s; -moz-animation-name: arrow_5; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 4s; -o-animation-name: arrow_5; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 4s; animation-name: arrow_5; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-hardware { background: left center no-repeat; background-size: 60%; }
#hd .sec-hardware .hd-figure { margin-top: 8%; margin-left: -10%; }
#hd .sec-hardware .hd-figure figure:first-child { margin-top: -8%; }
#hd .sec-hardware .hd-figure figure:first-child p { padding-left: 30%; margin-bottom: -5%; }
#hd .sec-hardware .hd-figure figure:last-child { margin-top: 15%; margin-left: -5%; }
#hd .sec-hardware .hd-figure figure:last-child p { padding-left: 40%; margin-bottom: -8%; }
#hd .sec-hardware .hd-figure figure p { opacity: 0; }
#hd .sec-hardware .hd-content p, #hd .sec-hardware .hd-content small { display: block; margin-bottom: 1em; }
#hd .sec-hardware .hd-content img { width: 45%; max-width: 214px; margin-left: 0; }
#hd .sec-hardware.hd-active .hd-figure figure { opacity: 0; }
#hd .sec-hardware.hd-active .hd-figure figure:first-child { animation: fadeInDown .8s .5s ease forwards; }
#hd .sec-hardware.hd-active .hd-figure figure:last-child { animation: fadeInUp .8s .5s ease forwards; }
#hd .sec-hardware.hd-active .hd-figure figure p { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.5s; -webkit-animation-name: fadeInDown; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.5s; -moz-animation-name: fadeInDown; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.5s; -o-animation-name: fadeInDown; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.5s; animation-name: fadeInDown; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd #vpn-container { margin: 5em auto 0; position: relative; }
#hd #vpn-container .vpn-main { position: relative; }
#hd #vpn-container h4 { font-size: 1.6em; position: absolute; left: 0; right: 0; bottom: 100%; }
#hd #vpn-container h4.vpn-text-1 { -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: vpn-text-1; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: vpn-text-1; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: vpn-text-1; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: vpn-text-1; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #vpn-container h4.vpn-text-2 { -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: vpn-text-2; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: vpn-text-2; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: vpn-text-2; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: vpn-text-2; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #vpn-container .vpn-mark { position: absolute; bottom: 0; right: 15%; width: 20%; opacity: 0; -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: vpn-mark; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: vpn-mark; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: vpn-mark; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: vpn-mark; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #vpn-container .vpn-red, #hd #vpn-container .vpn-crimson { position: absolute; left: 0%; bottom: 0%; width: 100%; height: 100%; overflow: hidden; }
#hd #vpn-container .vpn-red img, #hd #vpn-container .vpn-crimson img { position: absolute; top: 0; left: 0; height: 100%; width: 1200px; max-width: 1200px !important; }
#hd #vpn-container .vpn-crimson02 { right: 0; left: auto; }
#hd #vpn-container .vpn-crimson02 img { right: 0; left: auto; }
#hd #vpn-container .vpn-red { -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: vpn-red; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: vpn-red; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: vpn-red; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: vpn-red; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #vpn-container .vpn-crimson01 { -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: crimson01; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: crimson01; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: crimson01; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: crimson01; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #vpn-container .vpn-crimson02 { -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: crimson02; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: crimson02; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: crimson02; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: crimson02; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd #vpn-container .vpn-crimson03 { -webkit-animation-delay: 0s; -webkit-animation-duration: 6s; -webkit-animation-name: crimson03; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 6s; -moz-animation-name: crimson03; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 6s; -o-animation-name: crimson03; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 6s; animation-name: crimson03; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-radar { position: relative; }
#hd .sec-radar:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; padding-left: 60%; background: url(../img/bg-radar.png) center center no-repeat; background-size: 100% auto; }
#hd .sec-radar small { margin-top: 1.5em; }
#hd .sec-radar.hd-active #radar-container li h5 { -webkit-animation-delay: 0.9s; -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: 0.9s; -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: 0.9s; -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: 0.9s; animation-duration: 0.4s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-radar.hd-active #radar-container li img { -webkit-animation-delay: 0.5s; -webkit-animation-duration: 1s; -webkit-animation-name: zoomIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.5s; -moz-animation-duration: 1s; -moz-animation-name: zoomIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.5s; -o-animation-duration: 1s; -o-animation-name: zoomIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.5s; animation-duration: 1s; animation-name: zoomIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd #radar-container { width: 80%; margin: 0 8% -12% auto; position: relative; }
#hd #radar-container ul { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
#hd #radar-container li { position: absolute; width: 14%; text-align: center; }
#hd #radar-container li h5, #hd #radar-container li img { opacity: 0; }
#hd #radar-container li h5 { margin-top: .25em; }
#hd #radar-container li:nth-child(1) { top: 30%; left: 10%; }
#hd #radar-container li:nth-child(2) { top: 23%; left: 42%; }
#hd #radar-container li:nth-child(3) { top: 28%; right: 5%; }
#hd .sec-center .container { z-index: 2; margin-bottom: -5%; }
#hd .sec-center figure { width: 100%; }
#hd .sec-plug .hd-container, #hd .sec-gear .hd-container { height: 20em; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
#hd .sec-plug .hd-content, #hd .sec-gear .hd-content { max-width: 400px; margin-left: auto; }
#hd .sec-network { background: center center no-repeat; background-size: 100% auto; }
#hd .sec-network p { margin-bottom: 2em; }
#hd .sec-network .network-container { max-width: 977px; margin: 0 auto; }
#hd .sec-network figure { width: 100%; height: 0; padding-bottom: 53.0194%; position: relative; }
#hd .sec-network figure img, #hd .sec-network figure .line { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#hd .sec-network figure .line { overflow: hidden; }
#hd .sec-network figure .line img { width: 977px; max-width: none !important; height: 100%; }
#hd .sec-network figure .light { opacity: 0; }
#hd .sec-network.hd-active figure .line { -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: network_line; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 2s; -moz-animation-name: network_line; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 2s; -o-animation-name: network_line; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 2s; animation-name: network_line; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-network.hd-active figure .light-1 { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-network.hd-active figure .light-2 { -webkit-animation-delay: 0.5s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0.5s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0.5s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0.5s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-network.hd-active figure .light-3 { -webkit-animation-delay: 1s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 1s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 1s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 1s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .sec-network .hd-note { margin-top: -5em; }
#hd .sec-network .hd-note li { width: 100%; margin: -.5em 0; }
#hd .sec-network .hd-note li img { flex-shrink: 0; margin: 0 1em 0 0; }
#hd .sec-network .hd-note h5 { font-size: 1.75em; font-style: italic; }
#hd .sec-network .hd-note h5.color-primary { color: #950013 !important; }

@media screen and (max-width: 1440px) { #hd .sec-hardware .hd-figure { width: 58%; margin-left: -3%; }
  #hd #vpn-container { max-width: 900px; }
  #hd #vpn-container .vpn-red img, #hd #vpn-container .vpn-crimson img { max-width: 900px !important; } }
@media screen and (max-width: 1280px) { #hd #radar-container { width: 100%; }
  #hd .sec-plug .hd-content, #hd .sec-gear .hd-content { width: 35%; }
  #hd .sec-gear .hd-content { width: 30%; }
  #hd .sec-network .network-container { max-width: 800px; }
  #hd .sec-network figure .line img { width: 800px; } }
@media screen and (max-width: 1024px) { #hd .sec-network .network-container { max-width: 580px; }
  #hd .sec-network figure .line img { width: 580px; }
  #hd .sec-network .hd-note li { margin: -1em 0; }
  #hd .sec-network .hd-note h5 { font-size: 1.5em; } }
@media screen and (max-width: 1023px) { #hd #vpn-container { max-width: 650px; }
  #hd #vpn-container .vpn-red img, #hd #vpn-container .vpn-crimson img { max-width: 650px !important; } }
@media screen and (max-width: 768px) { #hd .sec-acceleration .hd-content { width: 95%; margin: 1em auto; }
  #hd .sec-acceleration .hd-content li { width: 100%; padding: 0; margin-bottom: 1.5em; }
  #hd .sec-acceleration .hd-content li:nth-child(2) { padding-left: 0; }
  #hd .sec-acceleration h4 { align-items: center; font-size: 1.5em; }
  #hd .sec-acceleration h4 img { width: 2.5em; }
  #hd .sec-hardware { background-size: 100%; }
  #hd .sec-hardware .container { flex-direction: column-reverse; }
  #hd .sec-hardware .hd-figure { width: 100%; margin-left: 0; margin-top: -10%; }
  #hd .sec-hardware .hd-figure figure:first-child p { padding-left: 0; margin-bottom: 0; }
  #hd .sec-hardware .hd-figure figure:last-child p { padding-left: 30%; margin-bottom: 0; }
  #hd .sec-hardware .hd-content { width: 100%; }
  #hd .sec-hardware .hd-content img { width: 25%; margin: 0 0 0 auto; }
  #hd #vpn-container { max-width: 400px; }
  #hd #vpn-container .vpn-red img, #hd #vpn-container .vpn-crimson img { max-width: 400px !important; }
  #hd #radar-container { margin: 0 auto -5%; }
  #hd .sec-plug .hd-container, #hd .sec-gear .hd-container { height: auto; position: relative; }
  #hd .sec-plug .hd-content, #hd .sec-gear .hd-content { width: 100%; max-width: none; }
  #hd .sec-gear { flex-direction: column-reverse; }
  #hd .sec-gear.hd-active { display: flex !important; }
  #hd .sec-gear figure { width: 100%; } }
@media screen and (max-width: 620px) { #hd .sec-acceleration .hd-bar { width: 90%; padding: 2em 0; }
  #hd .sec-acceleration .hd-bar.is-animated .bar { width: 20%; }
  #hd #acceleration-container { width: 110%; margin-left: -5%; margin-bottom: 0; }
  #hd .sec-plug, #hd .sec-gear { position: relative; overflow: hidden; }
  #hd .sec-plug img, #hd .sec-gear img { width: 140%; max-width: none !important; margin-right: -40%; }
  #hd .sec-gear img { width: 125%; max-width: none !important; margin-left: -15%; }
  #hd .sec-network .network-container { max-width: 90vw; }
  #hd .sec-network figure .line img { width: 90vw; }
  #hd .sec-network .hd-note { margin-top: -2em; }
  #hd .sec-network .hd-note img { width: 25%; min-width: 70px; }
  #hd .sec-network .hd-note h5 { font-size: 1.25em; } }
@media screen and (max-width: 480px) { #hd #vpn-container { max-width: 340px; }
  #hd #vpn-container .vpn-red img, #hd #vpn-container .vpn-crimson img { max-width: 340px !important; }
  #hd #radar-container li { width: 16%; }
  #hd .sec-network .hd-note li h5 { font-size: 1.125em; font-weight: normal; }
  #hd .sec-network .hd-note img { margin: 1em auto -1em; } }
@media screen and (max-width: 375px) { #hd #vpn-container { max-width: 280px; }
  #hd #vpn-container .vpn-red img, #hd #vpn-container .vpn-crimson img { max-width: 280px !important; }
  #hd .sec-network .hd-note li h5 { font-size: 1em; } }
#hd { /* CONSOLE GAMER */ }
#hd .sec-nat { position: relative; overflow: hidden; }
#hd .sec-nat figure { margin-left: -30%; }
#hd .sec-nat .hd-content { position: relative; z-index: 2; }
#hd .sec-nat .hd-content p { margin-bottom: 2em; }
#hd .sec-nat .btn-container { padding-left: 70px; }
#hd .nat_container { display: none; }
#hd .nat_container.hd-active { display: block; -webkit-animation-delay: 0s; -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: 0s; -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: 0s; -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: 0s; 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 .nat_container > p { margin: 2em 0; }
#hd .nat_container ul { background: url(../img/bg-nat.jpg) center center no-repeat; background-size: cover; }
#hd .nat_container li { padding: 1.5em; }
#hd .nat_container li:nth-child(1) { background-color: rgba(192, 13, 59, 0.1); }
#hd .nat_container li:nth-child(2) { background-color: rgba(192, 13, 59, 0.25); }
#hd .nat_container li:nth-child(3) { background-color: rgba(192, 13, 59, 0.4); }
#hd .sec-prioritization p { margin-bottom: 2em; }
#hd .sec-wifi figure > div { position: relative; }
#hd .sec-wifi figure img { width: 105%; margin-top: -15%; max-width: none !important; }
#hd .sec-wifi .hd-tag { display: block; width: 15em; font-size: 1.125em; line-height: 1.5; text-align: center; padding: 1em; margin: 2em 1em 0; background: url(../img/btn/txt-box-01.png) center no-repeat; background-size: 100%; position: relative; }
#hd .sec-wifi .hd-tag.tag-red { background-image: url(../img/btn/txt-box-02.png); }
#hd .sec-wifi .hd-left img { margin-right: -5%; }
#hd .sec-wifi .hd-left .hd-tag { margin-left: auto; }
#hd .sec-wifi .hd-right img { margin-left: -5%; }
#hd .security-container { width: 85%; margin: 0 auto; position: relative; }
#hd .security-container li { width: 40%; max-width: 440px; position: absolute; cursor: pointer; }
#hd .security-container li:nth-child(1) { bottom: 12%; left: -5%; }
#hd .security-container li:nth-child(2) { bottom: -2%; left: 36%; }
#hd .security-container li:nth-child(3) { bottom: 30%; right: -6%; }
#hd .security-container li img { margin-bottom: 1.5em; -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: pulse; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 2s; -moz-animation-name: pulse; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 2s; -o-animation-name: pulse; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 2s; animation-name: pulse; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: both; }
#hd .security-container li img:hover { animation-play-state: pause; -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); }
#hd .security-container li .hd-content { padding: 2em; background: rgba(0, 0, 0, 0.5); position: relative; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; -webkit-transition: all 0.8s ease; transition: all 0.8s ease; }
#hd .security-container li .hd-content h4 { margin-bottom: .25em; }
#hd .security-container li .hd-content p { opacity: 0; max-height: 0; overflow: hidden; -moz-transition: max-height 1s linear, opacity 0.4s; -o-transition: max-height 1s linear, opacity 0.4s; -webkit-transition: max-height 1s linear, opacity 0.4s; transition: max-height 1s linear, opacity 0.4s; }
#hd .security-container li .hd-content:before, #hd .security-container li .hd-content:after { content: ''; display: block; width: 1em; height: 1em; position: absolute; border: solid rgba(254, 46, 60, 0.65); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
#hd .security-container li .hd-content:before { top: 0em; left: 0em; border-width: 2px 0 0 2px; z-index: 2; }
#hd .security-container li .hd-content:after { bottom: 0em; right: 0em; border-width: 0 2px 2px 0; }
#hd .security-container li:hover .hd-content p { opacity: 1; max-height: 1000px; -moz-transition: max-height 2.5s linear, opacity 0.4s 0.25s; -o-transition: max-height 2.5s linear, opacity 0.4s 0.25s; -webkit-transition: max-height 2.5s linear, opacity 0.4s 0.25s; transition: max-height 2.5s linear, opacity 0.4s 0.25s; }
#hd .sec-management .hd-container { position: relative; z-index: 2; }
#hd .sec-management figure { position: relative; margin-top: -3em; }
#hd .sec-management figure > img { width: 100%; }
#hd .sec-management figure ul { width: 100%; max-width: 32em; position: absolute; top: 0; left: 0; right: 0; margin: 5em auto 0; z-index: 2; }
#hd .sec-management figure ul li { padding: 0 1em; }

@media screen and (max-width: 1500px) { #hd .sec-nat figure { width: 70%; margin-left: -15%; margin-right: -5%; } }
@media screen and (max-width: 1280px) { #hd .sec-nat figure { width: 70%; margin-left: -15%; }
  #hd .sec-nat .hd-content { width: 45%; } }
@media screen and (max-width: 1024px) { #hd .sec-wifi .hd-tag { min-width: 14em; font-size: 1em; line-height: 1.25; }
  #hd .sec-management figure { margin-top: 0; }
  #hd .sec-management figure ul { margin: 2em auto -4em; text-shadow: 0 0 5px black; position: relative; } }
@media screen and (max-width: 1023px) { #hd .security-container { width: 100%; }
  #hd .security-container li img { width: 30%; min-width: 50px; margin-bottom: .5em; }
  #hd .security-container li .hd-content { padding: 1em 1.5em; } }
@media screen and (max-width: 768px) { #hd .sec-nat figure { width: 100%; margin: 0; }
  #hd .sec-nat .hd-content { width: 100%; text-align: center; }
  #hd .sec-nat .btn-container { padding-left: 0; }
  #hd .nat_container li { padding: 1em; }
  #hd .sec-wifi figure img { margin-top: 0; } }
@media screen and (max-width: 620px) { #hd .sec-nat figure { flex-shrink: 0; width: 120%; margin-left: -10%; }
  #hd .nat_container li { width: 100%; } }
@media screen and (max-width: 480px) { #hd .sec-wifi figure > div { width: 100%; }
  #hd .sec-wifi figure img { width: 100%; margin: -10% 0 0 !important; }
  #hd .sec-wifi .hd-tag { margin: 2em; }
  #hd .security-container { margin-top: 2em; }
  #hd .security-container li { width: 100%; margin: 1.5em 0; position: relative; pointer-events: none; }
  #hd .security-container li:nth-child(n) { top: 0; right: 0; bottom: 0; left: 0; }
  #hd .security-container li .hd-content { background: rgba(255, 255, 255, 0.1); }
  #hd .security-container li .hd-content h4 { font-size: 1.5em; }
  #hd .security-container li .hd-content p { opacity: 1; max-height: 1000px; }
  #hd .sec-management figure ul { margin: 2em auto 0; } }
#hd { /* MOBILE GAMER */ }
#hd .sec-mobile { position: relative; overflow: hidden; }
#hd .sec-mobile figure { width: 80%; height: 0; padding-bottom: 145%; margin: -5% -25% 0 auto; position: relative; z-index: 2; }
#hd .sec-mobile figure img, #hd .sec-mobile figure video { display: block; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-mobile figure img { width: 150%; max-width: none !important; left: -25%; }
#hd .sec-mobile .hd-content { position: relative; z-index: 1; }
#hd .sec-mobile .hd-content img { width: 120%; max-width: none !important; margin-top: -15%; margin-left: -10%; position: relative; z-index: -1; }
#hd .sec-mobile_wifi { background: right center no-repeat; background-size: 65% auto; }
#hd .sec-mobile_wifi .hd-btn { margin: 2em 3em 0; }
#hd .sec-mobile_wifi figure { max-width: 614px; position: relative; margin: 0 auto; }
#hd .sec-mobile_wifi figure .circle { width: 40%; height: 0; padding-top: 40%; border-radius: 50%; background-color: rgba(254, 46, 60, 0.25); position: absolute; top: 21%; z-index: -1; -webkit-animation-delay: 0s; -webkit-animation-duration: 3s; -webkit-animation-name: wholeCircle; -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: wholeCircle; -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: wholeCircle; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 3s; animation-name: wholeCircle; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-mobile_wifi figure .circle.circle01 { left: 12%; }
#hd .sec-mobile_wifi figure .circle.circle02 { right: 13%; }
#hd .sec-mobile_wifi figure .circle:after { content: ''; width: 140%; height: 140%; position: absolute; top: -20%; left: -20%; border-radius: 50%; background-color: rgba(254, 46, 60, 0.25); box-shadow: 0 0 10px rgba(254, 46, 60, 0.65); -webkit-animation-delay: 0s; -webkit-animation-duration: 3s; -webkit-animation-name: wholeCircle_s; -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: wholeCircle_s; -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: wholeCircle_s; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 3s; animation-name: wholeCircle_s; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: forwards; }
#hd .sec-mimo { padding: 15% 0 !important; background: top right no-repeat; background-size: 70%; }

@media screen and (max-width: 1280px) { #hd .sec-mobile figure { margin: -5% -20% 0 auto; }
  #hd .sec-mobile_wifi .btn-container { text-align: center; }
  #hd .sec-mobile_wifi figure { margin-left: 0; } }
@media screen and (max-width: 1023px) { #hd .sec-mobile { position: relative; overflow: hidden; }
  #hd .sec-mobile .container { justify-content: flex-start; flex-direction: column-reverse; position: static; }
  #hd .sec-mobile .hd-figure { margin-right: auto; }
  #hd .sec-mobile figure { padding-bottom: 220%; }
  #hd .sec-mobile .hd-content { width: 100%; position: static; }
  #hd .sec-mobile .hd-content img { width: 100%; position: absolute; bottom: 0; right: -15%; } }
@media screen and (max-width: 768px) { #hd .sec-mobile_wifi { text-align: center; background-position: right bottom; background-size: 80% auto; }
  #hd .sec-mobile_wifi .hd-content { width: 100%; padding-bottom: 25%; }
  #hd .sec-mobile_wifi .hd-btn { margin-top: 1em; }
  #hd .sec-mimo { padding: 15% 0 !important; background-size: 90%; }
  #hd .sec-mimo .hd-content { width: 70%; } }
@media screen and (max-width: 620px) { #hd .sec-mobile .hd-figure { width: 100%; max-width: 360px; margin: 0 auto; }
  #hd .sec-mobile figure { width: 60%; padding-bottom: 140%; margin: 0 auto; }
  #hd .sec-mobile .hd-content img { display: none; }
  #hd .sec-mimo { padding: 5em 0 60% !important; background-size: 100%; background-position: right bottom; }
  #hd .sec-mimo .hd-content { width: 100%; } }

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