/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* OUTER */
.ProductTabBar__productTabBarContainer__1e5nP, .overviewSimpleContent, .overviewAwardsContent, .ProductRecommenedRelated__productRecommendRelatedContainer__3Akgf, .ProductFooter__productFooterContainer__Z6Bel.ProductFooter__productBackgroundBlack__24n1I, .disclaimerWrapper, .Footer__footerContent__22G1u, .FooterBreadcrumb__wrapper__2uJ7V, .FooterBreadcrumb__themeWhite__3uyCB, .asusOfficialFooter { position: relative; z-index: 2; }

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

/* ---------- RESET ---------- */
#hd { font-family: "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; background: black; color: white; font-size: 16px; margin: 0; padding: 0; /* ---------- SCREEN READER ---------- */ }
#hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; }
#hd * ::selection { background: #1d2124; color: #ffa800; }
#hd * ::-moz-selection { background: #1d2124; color: #ffa800; }
#hd ul, #hd li, #hd figure { margin: 0; padding: 0; }
#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; padding: 0; margin: 0; }
#hd img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0; }
#hd img.lazyload { opacity: 0; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; }
#hd iframe, #hd video { max-width: 100%; }
#hd button { background: none; border: none; box-shadow: none; }
#hd .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#hd a:focus-visible, #hd button:focus-visible, #hd input:focus-visible, #hd select:focus-visible, #hd textarea:focus-visible, #hd [role="button"]:focus-visible, #hd [tabindex="0"]:focus-visible { outline: 1px solid #ffa800; }
#hd a:focus:not(:focus-visible), #hd button:focus:not(:focus-visible), #hd input:focus:not(:focus-visible), #hd select:focus:not(:focus-visible), #hd textarea:focus:not(:focus-visible), #hd [role="button"]:focus:not(:focus-visible), #hd [tabindex="0"]:focus:not(:focus-visible) { outline: none; }

/* ---------- ANIMATIONS ---------- */
@-webkit-keyframes 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); } }
@-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; } }
#hd .fadeIn { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease-in-out; -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-in-out; -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-in-out; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: forwards; }

@-webkit-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); }
  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(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); }
  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(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); }
  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(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); }
  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(50px); -o-transform: translateY(50px); -ms-transform: translateY(50px); -webkit-transform: translateY(50px); transform: translateY(50px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes revealTag { 0% { clip-path: polygon(0 0, 0 calc(100% - .2em), 0 100%, 0 100%, 0 0); }
  100% { clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); } }
@-moz-keyframes revealTag { 0% { clip-path: polygon(0 0, 0 calc(100% - .2em), 0 100%, 0 100%, 0 0); }
  100% { clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); } }
@-ms-keyframes revealTag { 0% { clip-path: polygon(0 0, 0 calc(100% - .2em), 0 100%, 0 100%, 0 0); }
  100% { clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); } }
@-o-keyframes revealTag { 0% { clip-path: polygon(0 0, 0 calc(100% - .2em), 0 100%, 0 100%, 0 0); }
  100% { clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); } }
@keyframes revealTag { 0% { clip-path: polygon(0 0, 0 calc(100% - .2em), 0 100%, 0 100%, 0 0); }
  100% { clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); } }
@-webkit-keyframes revealFrame { 0% { opacity: 0; width: 0; height: 0; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; width: 0; height: 0; }
  100% { opacity: 1; width: 100%; height: 100%; } }
@-moz-keyframes revealFrame { 0% { opacity: 0; width: 0; height: 0; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; width: 0; height: 0; }
  100% { opacity: 1; width: 100%; height: 100%; } }
@-ms-keyframes revealFrame { 0% { opacity: 0; width: 0; height: 0; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; width: 0; height: 0; }
  100% { opacity: 1; width: 100%; height: 100%; } }
@-o-keyframes revealFrame { 0% { opacity: 0; width: 0; height: 0; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; width: 0; height: 0; }
  100% { opacity: 1; width: 100%; height: 100%; } }
@keyframes revealFrame { 0% { opacity: 0; width: 0; height: 0; }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; width: 0; height: 0; }
  100% { opacity: 1; width: 100%; height: 100%; } }
@-webkit-keyframes revealFrameContent { 0%,
    90% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes revealFrameContent { 0%,
    90% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes revealFrameContent { 0%,
    90% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes revealFrameContent { 0%,
    90% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes revealFrameContent { 0%,
    90% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes stripe { 0% { transform: translate(11.74px, 144.414993px); }
  to { transform: translate(11.74px, 158.875542px); } }
@font-face { font-family: 'KairosSans'; src: url("../fonts/KairosSansW1G-CnMedium.ttf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DINPro'; src: url("../fonts/DINPro-CondBold.ttf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Myriad Pro'; src: url("../fonts/MyriadPro-Regular.otf"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Myriad Pro'; src: url("../fonts/MyriadPro-Light.otf"); font-weight: 300; font-style: normal; font-display: swap; }
#hd { font-family: "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 16px; }
#hd h2 { font-family: "DINPro", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 3em; letter-spacing: .045em; line-height: 1.125; color: #ffffff !important; word-break: normal; word-wrap: normal; margin-bottom: .5em; text-transform: uppercase; }
#hd h2.color-primary { color: #ffa800 !important; }
#hd h3 { font-family: "DINPro", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.5em; color: #ffffff !important; letter-spacing: .3em; line-height: 1.125; margin-bottom: .5em; text-transform: uppercase; }
#hd h3.color-primary { color: #ffa800 !important; }
#hd h4 { font-family: "DINPro", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 2.375em; font-weight: bold; letter-spacing: 0; line-height: 1.2; margin-bottom: -.35em; }
#hd h5 { font-family: "DINPro", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.25em; letter-spacing: .04em; font-weight: 400; line-height: 1.25; text-transform: uppercase; }
#hd h6 { font-family: "DINPro", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; }
#hd p, #hd small, #hd a, #hd li { font-family: "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; }
#hd p { font-size: 1em; line-height: 1.7; letter-spacing: .02em; font-weight: 300; }
#hd b { font-weight: bold; }
#hd small { font-size: 14px; font-weight: 400; letter-spacing: 0.5px; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#hd .align-italic { font-style: italic; }
#hd a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; }
#hd a.txt-link:hover { color: white; }
#hd .color-primary { color: #ffa800; }
#hd .color-grey { color: #d1d1d1 !important; }
#hd .color-dark { color: #888888 !important; }
#hd .color-gradient { color: white !important; background-color: #777777 0%; background-image: -moz-linear-gradient(180deg, #777777 0%, #F7F7F7 20%, #A4A4A4 100%); background-image: -webkit-linear-gradient(180deg, #777777 0%, #F7F7F7 20%, #A4A4A4 100%); background-image: linear-gradient(180deg, #777777 0%, #F7F7F7 20%, #A4A4A4 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .font-tuf { font-family: "KairosSans", "DINPro", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; }
#hd .hd-uppercase { text-transform: uppercase; }

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

@media screen and (min-width: 2560px) { #hd { font-size: 20px; } }
@media screen and (min-width: 3000px) { #hd { font-size: 28px; } }
@media screen and (max-width: 1440px) { #hd h2 { font-size: 2.75em; } }
@media screen and (max-width: 1024px) { #hd h2 { font-size: 2.25em; }
  #hd h3 { font-size: 1.25em; } }
@media screen and (max-width: 480px) { #hd h2 { font-size: 1.75em; margin: .35em 0 .875em; }
  #hd h3 { font-size: 1.125em; line-height: 1.2; }
  #hd p { font-size: 15px; } }
#hd .w95 { width: 94%; margin: 0 auto; position: relative; }
#hd .hd-w900, #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1280, #hd .hd-w1366, #hd .hd-w1520, #hd .hd-w1680 { width: 80%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w900, #hd .hd-mw900 { max-width: 900px; }
#hd .hd-w1000 { max-width: 1000px; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1280 { max-width: 1280px; }
#hd .hd-w1366 { width: 90%; max-width: 1366px; }
#hd .hd-w1520 { width: 90%; max-width: 1520px; }
#hd .hd-w1680 { width: 90%; max-width: 1680px; }
#hd .hd-w2560 { max-width: 2560px; margin: 0 auto; position: relative; }
#hd .hd-col20 { width: 16%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col30 { width: 30%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col66 { width: 66.6666%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col100 { width: 100%; }
#hd .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }
#hd .align-items-center { align-items: center; }
#hd .align-items-start { align-items: flex-start; }
#hd .align-items-end { align-items: flex-end; }
#hd .justify-content-center { justify-content: center; }
#hd .justify-content-start { justify-content: flex-start; }
#hd .justify-content-end { justify-content: flex-end; }
#hd .justify-content-between { justify-content: space-between; }
#hd .justify-content-around { justify-content: space-around; }
#hd .flex-row-reverse { flex-direction: row-reverse; }
#hd .m-auto { margin: auto; }
#hd .ml-auto { margin-left: auto; }
#hd .mx-auto { margin-left: auto; margin-right: auto; }
#hd .hd-d-none { display: none; }
#hd .hd-d-ib { display: inline-block; }

@media screen and (min-width: 2560px) { #hd .hd-w900, #hd .hd-w1000 { max-width: 1200px; }
  #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1280, #hd .hd-w1366 { max-width: 1600px; }
  #hd .hd-w1520, #hd .hd-w1680 { width: 90%; max-width: 2000px; } }
@media screen and (min-width: 3000px) { #hd .hd-w900, #hd .hd-w1000 { max-width: 1400px; }
  #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1280, #hd .hd-w1366 { max-width: 2560px; }
  #hd .hd-w1520, #hd .hd-w1680 { width: 90%; max-width: 3000px; } }
@media screen and (max-width: 1023px) { #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200 { width: 90%; } }
@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; }
  #hd .hd-d-1023-block { display: block; }
  #hd .hd-d-1023-inline-block { display: inline-block; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; }
  #hd .hd-d-768-block { display: block; }
  #hd .hd-d-768-flex { display: flex; } }
@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; width: auto !important; font-weight: bold; text-shadow: none; font-size: 1.25em; font-weight: 500; padding: .5em .75em .25em; margin-top: 1em; color: #ffa800; border: 1px solid #ffa800; cursor: pointer; -moz-transition: background 0.25s ease; -o-transition: background 0.25s ease; -webkit-transition: background 0.25s ease; transition: background 0.25s ease; }
#hd .hd-btn:hover { background: #ffa800; color: black; }
#hd .hd-tag { display: inline-block; clip-path: polygon(0 0, 0 calc(100% - .2em), 0 100%, 0 100%, 0 0); }
#hd .hd-tag h2 { padding: .4em .3em 0 .4em; color: black !important; position: relative; z-index: 2; }
#hd .hd-tag h2:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 168, 0, 0.95); clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); z-index: -1; }
#hd .hd-frame-container { display: inline-block; padding: .5em 1em; margin-bottom: 1em; position: relative; overflow: hidden; width: 0; height: 0; opacity: 0; }
#hd .hd-frame-container .frame-content { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; opacity: 0; }
#hd .hd-frame-container p { width: auto; white-space: nowrap; flex-shrink: 0; font-weight: 400; line-height: 1.125; padding-left: 1em; }
#hd .hd-frame-container p strong { font-size: 1.5em; }
#hd .hd-frame-container.larger { display: flex; padding: 1.25em 2em; }
#hd .hd-frame-container.larger p { width: 14em; white-space: normal; font-size: 1.5em; }
#hd .hd-frame-container.bg-black { background: rgba(0, 0, 0, 0.4); }
#hd .hd-frame-container.bg-white { background: rgba(255, 255, 255, 0.1); }
#hd .hd-frame-container > .deco-top, #hd .hd-frame-container > .deco-bottom { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; }
#hd .hd-frame-container > .deco-top:before, #hd .hd-frame-container > .deco-top:after, #hd .hd-frame-container > .deco-bottom:before, #hd .hd-frame-container > .deco-bottom:after { content: ''; display: block; width: .625em; height: .625em; position: absolute; }
#hd .hd-frame-container > .deco-top:before { border-top: 1px solid white; border-left: 1px solid white; top: 0; left: 0; }
#hd .hd-frame-container > .deco-top:after { border-top: 1px solid white; border-right: 1px solid white; top: 0; right: 0; }
#hd .hd-frame-container > .deco-bottom:before { border-bottom: 1px solid white; border-left: 1px solid white; bottom: 0; left: 0; }
#hd .hd-frame-container > .deco-bottom:after { border-bottom: 1px solid white; border-right: 1px solid white; bottom: 0; right: 0; }
#hd .hd-dot-frame { position: relative; border: 1px solid rgba(255, 168, 0, 0.3); }
#hd .hd-dot-frame:first-child { margin-right: -1px; border-right-width: 0px; }
#hd .hd-dot-frame:last-child { margin-left: -1px; }
#hd .hd-dot-frame > .deco-top, #hd .hd-dot-frame > .deco-bottom { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; }
#hd .hd-dot-frame > .deco-top:before, #hd .hd-dot-frame > .deco-top:after, #hd .hd-dot-frame > .deco-bottom:before, #hd .hd-dot-frame > .deco-bottom:after { content: ''; display: block; width: .5em; height: .5em; background: #ffa800; margin: -.25em; position: absolute; }
#hd .hd-dot-frame > .deco-top:before { top: 0; left: 0; }
#hd .hd-dot-frame > .deco-top:after { top: 0; right: 0; }
#hd .hd-dot-frame > .deco-bottom:before { bottom: 0; left: 0; }
#hd .hd-dot-frame > .deco-bottom:after { bottom: 0; right: 0; }
#hd .hd-dot-frame .color-dark { color: rgba(255, 255, 255, 0.5) !important; }
#hd .hd-animated .hd-tag { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.6s; -webkit-animation-name: revealTag; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.6s; -moz-animation-name: revealTag; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.6s; -o-animation-name: revealTag; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.6s; animation-name: revealTag; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .hd-animated .hd-frame-container { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.6s; -webkit-animation-name: revealFrame; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.6s; -moz-animation-name: revealFrame; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.6s; -o-animation-name: revealFrame; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.6s; animation-name: revealFrame; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .hd-animated .hd-frame-container .frame-content { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.6s; -webkit-animation-name: revealFrameContent; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.6s; -moz-animation-name: revealFrameContent; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.6s; -o-animation-name: revealFrameContent; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.6s; animation-name: revealFrameContent; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

@media screen and (max-width: 1280px) { #hd .hd-frame-container.larger p { font-size: 1.25em; }
  #hd .hd-frame-container p { font-size: .9em; }
  #hd .hd-frame-container p strong { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd .hd-frame-container.larger p { font-size: 1.125em; }
  #hd .hd-frame-container p { font-size: .8em; }
  #hd .hd-frame-container p strong { font-size: 1.125em; } }
/* iPad Pro Portrait */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { #hd .hd-frame-container.larger p { font-size: 1.5em; }
  #hd .hd-frame-container p { font-size: 1em; }
  #hd .hd-frame-container p strong { font-size: 1.5em; } }
@media screen and (max-width: 768px) { #hd .hd-tag h2 { padding: 0.25em 0.3em 0.125em 0.4em; }
  #hd .hd-frame-container.larger p { font-size: 1.5em; }
  #hd .hd-frame-container p { font-size: 1em; }
  #hd .hd-frame-container p strong { font-size: 1.5em; } }
@media screen and (max-width: 620px) { #hd .hd-dot-frame:first-child { border-right-width: 1px; border-bottom-width: 0; margin-right: 0; margin-bottom: -1px; }
  #hd .hd-dot-frame:last-child { margin-left: 0; }
  #hd .hd-frame-container.larger p { color: #d1d1d1 !important; }
  #hd .hd-frame-container p { color: white !important; } }
@media screen and (max-width: 480px) { #hd .hd-frame-container { padding: .5em; }
  #hd .hd-frame-container.larger { padding: 1.25em 1em; }
  #hd .hd-frame-container.larger p { font-size: 1.125em; font-weight: 300; }
  #hd .hd-frame-container p { font-weight: 300; } }
#hd .hd-lightbox, #hd .step-lightbox { width: 100%; height: 100vh; padding: 20px; position: fixed; top: 52px; left: 0; display: none; z-index: 10; }
#hd .hd-lightbox .hd-filter, #hd .step-lightbox .hd-filter { width: 100%; height: 100%; background: black; position: absolute; top: 0; left: 0; }
#hd .hd-lightbox .hd-box, #hd .step-lightbox .hd-box { width: 100%; height: 100%; background: black; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; box-sizing: border-box; }
#hd .hd-lightbox .hd-box iframe, #hd .step-lightbox .hd-box iframe { width: calc(100% - 40px); height: calc(100% - 40px); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-lightbox .hd-close, #hd .step-lightbox .hd-close { width: 60px; height: 60px; background: #d1d1d1; position: absolute; top: 30px; right: 30px; cursor: pointer; z-index: 2; }
#hd .hd-lightbox .hd-close:hover, #hd .step-lightbox .hd-close:hover { background: #ffa800; }
#hd .hd-lightbox .hd-close > span, #hd .step-lightbox .hd-close > span { display: block; width: 24px; height: 2px; background: white; -webkit-border-radius: 1.5px; -moz-border-radius: 1.5px; border-radius: 1.5px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-lightbox .hd-close > span:first-child, #hd .step-lightbox .hd-close > span:first-child { -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
#hd .hd-lightbox .hd-close > span:last-child, #hd .step-lightbox .hd-close > span:last-child { -moz-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
#hd .trigger-play { cursor: pointer; }
#hd .step-lightbox img { width: 1024px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .step-lightbox .hd-close { background: #ffa800; }
#hd .step-lightbox .hd-close:hover { background: #4d4e4f; }

@media screen and (max-width: 1024px) { #hd .hd-lightbox .hd-close, #hd .step-lightbox .hd-close { width: 40px; height: 40px; top: 16px; right: 16px; }
  #hd .hd-lightbox .hd-close > span, #hd .step-lightbox .hd-close > span { width: 20px; height: 2px; } }
#hd .hd-nav { position: fixed; z-index: 999999; top: 50%; opacity: 1; -moz-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
#hd .hd-nav.left { left: 48px; }
#hd .hd-nav.right { right: 48px; }
#hd .hd-nav ul { margin: 0; padding: 0; }
#hd .hd-nav ul li { display: block; margin: 12px 0; position: relative; }
#hd .hd-nav ul li:nth-child(1) a span { background: #777777 0%; }
#hd .hd-nav ul li:nth-child(1) .hd-tooltip { color: #777777 0%; }
#hd .hd-nav ul li:nth-child(2) a span { background: #F7F7F7 20%; }
#hd .hd-nav ul li:nth-child(2) .hd-tooltip { color: #F7F7F7 20%; }
#hd .hd-nav ul li:nth-child(3) a span { background: #A4A4A4 100%; }
#hd .hd-nav ul li:nth-child(3) .hd-tooltip { color: #A4A4A4 100%; }
#hd .hd-nav ul li a { display: block; z-index: 1; cursor: pointer; text-decoration: none; }
#hd .hd-nav ul li a span { display: block; height: 3.8vh; width: 8px; border-radius: 2px; opacity: .5; z-index: 1; -moz-transform: skew(0deg, 40deg); -o-transform: skew(0deg, 40deg); -ms-transform: skew(0deg, 40deg); -webkit-transform: skew(0deg, 40deg); transform: skew(0deg, 40deg); -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; }
#hd .hd-nav ul li a:hover span, #hd .hd-nav ul li a.active span { opacity: 1; }
#hd .hd-nav ul li .hd-tooltip { height: 1.5em; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; margin: auto 0; opacity: 0; position: absolute; top: 0; bottom: 0; pointer-events: none; }
#hd .hd-nav ul li .hd-tooltip.right { right: 20px; }
#hd .hd-nav ul li .hd-tooltip .left { left: 20px; }
#hd .hd-nav ul li:hover .hd-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; }
#hd .hd-nav.fp-show-active a.active + .hd-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; }
#hd .scroll-up { position: fixed; right: 30px; bottom: 30px; width: 45px; height: 45px; text-align: center; cursor: pointer; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 2px solid #ffa800; opacity: 0; z-index: 99999; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd .scroll-up.hd-show { opacity: 1; }
#hd .scroll-up svg { display: block; position: absolute; margin: auto; top: 0; right: 0; bottom: 5px; left: 0; fill: #ffa800; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); }
#hd .scroll-up:hover { background-color: #ffa800; }
#hd .scroll-up:hover svg { fill: white; }

@media screen and (max-width: 1024px) { #hd .hd-nav.left { left: 20px; }
  #hd .hd-nav.right { right: 20px; } }
@media screen and (max-width: 768px) { #hd .hd-nav { display: none; }
  #hd .hd-nav ul li .hd-tooltip { display: none; } }
@media screen and (max-width: 480px) { #hd .scroll-up { bottom: 15px; right: 15px; } }
#hd .hd-switch { display: inline-block; vertical-align: middle; width: 2.5em; height: 1.25em; background: transparent; border-radius: 2em; position: relative; overflow: hidden; }
#hd .hd-switch input[type="checkbox"] { height: 100%; width: 100%; margin: 0; background: #888888; position: relative; cursor: pointer; appearance: none; -webkit-appearance: none; }
#hd .hd-switch input[type="checkbox"]:checked { background: #ffa800; }
#hd .hd-switch input[type="checkbox"]:checked ~ span { transform: translateX(0); }
#hd .hd-switch input[type="checkbox"]:focus-visible ~ span { outline: 2px solid white; }
#hd .hd-switch span { width: .75em; height: .75em; display: block; border-radius: 1.5em; background: black; position: absolute; top: .25em; right: .25em; z-index: 2; transform: translateX(-1.25em); transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }

#hd .vid-control { width: 3.25em; height: 3.25em; margin: 1.5em 1.25em; position: absolute; right: 0; bottom: 0; -moz-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; z-index: 2; cursor: pointer; }
#hd .vid-control .play { display: none; }
#hd .vid-control.hd-active .play { display: block; }
#hd .vid-control.hd-active .pause { display: none; }
@media screen and (max-width: 480px) { #hd .vid-control { margin: 1em .75em; padding: .5em; } }
#hd .sec-kv { font-size: 1.25em; padding-bottom: 6em; background: black; position: relative; z-index: 2; }
#hd .sec-kv h2 { font-size: 4.5em; letter-spacing: 0; margin-bottom: .25em; }
#hd .sec-kv h3 { font-size: 2.5em; letter-spacing: .018em; margin-bottom: .25em; }
#hd .sec-kv p { padding: 0 1em; margin-bottom: 2.5em; }
#hd .sec-kv li { margin: 0 .75em 1em; }
#hd .sec-kv .trigger-play { display: inline-block; font-weight: bold; text-shadow: none; font-size: 1.5em; font-weight: 500; padding: .25em .75em; margin-top: 2em; border: 1px solid #ffa800; cursor: pointer; }
#hd .sec-kv .trigger-play:hover i { -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }
#hd .sec-kv .trigger-play:hover i:after { -moz-transform: scale(1.4) rotate(-30deg); -o-transform: scale(1.4) rotate(-30deg); -ms-transform: scale(1.4) rotate(-30deg); -webkit-transform: scale(1.4) rotate(-30deg); transform: scale(1.4) rotate(-30deg); }
#hd .sec-kv .trigger-play:active i { -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }
#hd .sec-kv .trigger-play:active i:after { -moz-transform: scale(1.4) rotate(-60deg); -o-transform: scale(1.4) rotate(-60deg); -ms-transform: scale(1.4) rotate(-60deg); -webkit-transform: scale(1.4) rotate(-60deg); transform: scale(1.4) rotate(-60deg); }
#hd .sec-kv .trigger-play i { display: inline-block; vertical-align: top; width: 1.25em; height: 1.25em; background: url(../img/design/arrow_next.svg) center no-repeat; background-size: contain; margin-top: 0; position: relative; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
#hd .sec-kv .trigger-play i:after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #ffa800; position: absolute; top: 0; right: 0; bottom: 0; left: 6%; margin: auto; transform-origin: 30% center; -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }

@media screen and (max-width: 1280px) { #hd .sec-kv { font-size: 1.125em; padding-bottom: 4em; } }
@media screen and (max-width: 1024px) { #hd .sec-kv { font-size: 1em; padding-bottom: 4em; }
  #hd .sec-kv p { padding: 0 1.5em; font-size: 1.125em; }
  #hd .sec-kv ul { width: 110%; margin-left: -5%; }
  #hd .sec-kv li { margin: 0 .5em 1.5em; } }
@media screen and (max-width: 768px) { #hd .sec-kv figure { position: relative; overflow: hidden; }
  #hd .sec-kv figure .hd-bg { width: 130%; max-width: none !important; margin-left: -15%; }
  #hd .sec-kv h2 { font-size: 3.75em; }
  #hd .sec-kv p { padding: 0; }
  #hd .sec-kv ul { width: 100%; margin-left: 0; }
  #hd .sec-kv li { max-width: 14%; margin: 0 .5em 1.5em; }
  #hd .sec-kv li:nth-child(3), #hd .sec-kv li:nth-child(4), #hd .sec-kv li:nth-child(5) { max-width: 24%; }
  #hd .sec-kv li:nth-child(6) { max-width: 16%; }
  #hd .sec-kv li:nth-child(7) { max-width: 9%; }
  #hd .sec-kv .trigger-play { font-size: 1.25em; } }
@media screen and (max-width: 620px) { #hd .sec-kv h2 { font-size: 2.125em; }
  #hd .sec-kv h3 { font-size: 1.75em; }
  #hd .sec-kv p { font-size: 1em; padding: 0; } }
@media screen and (max-width: 480px) { #hd .sec-kv figure .hd-bg { width: 140%; margin-left: -20%; }
  #hd .sec-kv li { max-width: 20%; margin: 0 1em 1.5em; }
  #hd .sec-kv li:nth-child(3), #hd .sec-kv li:nth-child(4), #hd .sec-kv li:nth-child(5) { max-width: 30%; }
  #hd .sec-kv li:nth-child(6) { max-width: 25%; }
  #hd .sec-kv li:nth-child(7) { max-width: 13%; } }
#hd .sec-gaming { position: relative; }
#hd .sec-gaming:before, #hd .sec-gaming:after { content: ''; display: block; width: 100%; height: 0; padding-bottom: 10%; position: absolute; left: 0; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, black); background-image: -webkit-linear-gradient(180deg, transparent, black); background-image: linear-gradient(180deg, transparent, black); background-color: transparent; }
#hd .sec-gaming:before { top: 0; background-color: transparent; background-image: -moz-linear-gradient(0deg, transparent, black); background-image: -webkit-linear-gradient(0deg, transparent, black); background-image: linear-gradient(0deg, transparent, black); background-color: transparent; }
#hd .sec-gaming:after { bottom: 0; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, black); background-image: -webkit-linear-gradient(180deg, transparent, black); background-image: linear-gradient(180deg, transparent, black); background-color: transparent; }
#hd .sec-gaming .bg-container { width: 100%; position: fixed; top: 0; left: 0; }
#hd .sec-gaming .bg-container:after { content: ''; display: block; width: 1px; height: 80vh; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, #ffa800, transparent); background-image: -webkit-linear-gradient(180deg, transparent, #ffa800, transparent); background-image: linear-gradient(180deg, transparent, #ffa800, transparent); background-color: transparent; position: absolute; top: 4em; bottom: 0; left: 0; right: 0; margin: auto; }
#hd .sec-gaming .bg-container .hd-cover { width: 50%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; }
#hd .sec-gaming .bg-container .hd-cover.cover-pc { right: 0; }
#hd .sec-gaming .bg-container .hd-cover.cover-console { left: 0; }
#hd .sec-gaming .title-container { width: 100%; padding: 6em 0; position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; }
#hd .sec-gaming .title-container h3 { font-size: 2.25em; }
#hd .sec-gaming .hd-container { padding-top: 150vh; }
#hd .sec-gaming .hd-content { height: 100vh; padding-top: 100vh; }
#hd .sec-gaming .pc-content { padding-left: 10%; }
#hd .sec-gaming .console-content { height: 200vh; padding-right: 10%; margin-left: -5%; }
#hd .sec-gaming .console-content .hd-tag { margin-right: -20%; }
#hd .sec-gaming .hd-frame-container figure img { width: 100%; }
#hd .sec-gaming .hd-frame-container p { max-width: calc(100% - 80px); }
#hd .sec-gaming .hd-animated .hd-frame-container:nth-child(1) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -ms-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; }
#hd .sec-gaming .hd-animated .hd-frame-container:nth-child(1) .frame-content { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -ms-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; }
#hd .sec-gaming .hd-animated .hd-frame-container:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; }
#hd .sec-gaming .hd-animated .hd-frame-container:nth-child(2) .frame-content { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -ms-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; }
#hd .sec-gaming .hd-animated .hd-frame-container:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -ms-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; }
#hd .sec-gaming .hd-animated .hd-frame-container:nth-child(3) .frame-content { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -ms-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; }

@media screen and (max-width: 1280px) { #hd .sec-gaming .hd-frame-container figure { width: 60px; }
  #hd .sec-gaming .hd-frame-container p { max-width: calc(100% - 60px); } }
@media screen and (max-width: 1024px) { #hd .sec-gaming .title-container { padding: 4em 0; }
  #hd .sec-gaming .title-container h3 { font-size: 1.25em; }
  #hd .sec-gaming .pc-content { padding-left: 5%; }
  #hd .sec-gaming .console-content { padding-right: 5%; } }
/* iPad Pro Portrait */
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) { #hd .sec-gaming { padding-bottom: 4em; }
  #hd .sec-gaming:before, #hd .sec-gaming:after { display: none; }
  #hd .sec-gaming .hd-d-768-none { display: none; }
  #hd .sec-gaming .hd-d-768-block { display: block; }
  #hd .sec-gaming .title-container { padding: 0; position: relative; }
  #hd .sec-gaming .hd-container { width: 100%; padding-top: 0; }
  #hd .sec-gaming .hd-container > figure { position: relative; overflow: hidden; }
  #hd .sec-gaming .hd-container > figure img { width: 150%; max-width: none !important; margin: -10% 0; }
  #hd .sec-gaming .hd-container > figure.pc-img img { margin-left: -50%; }
  #hd .sec-gaming .hd-container > figure.console-img img { margin-right: -50%; }
  #hd .sec-gaming .hd-content { width: 100%; height: auto; padding: 0 5% !important; }
  #hd .sec-gaming .console-content { margin-left: 0; } }
@media screen and (max-width: 768px) { #hd .sec-gaming { padding-bottom: 4em; }
  #hd .sec-gaming:before, #hd .sec-gaming:after { display: none; }
  #hd .sec-gaming .hd-d-768-none { display: none; }
  #hd .sec-gaming .hd-d-768-block { display: block; }
  #hd .sec-gaming .title-container { padding: 1em 0; position: relative; }
  #hd .sec-gaming .hd-container { width: 100%; padding-top: 0; }
  #hd .sec-gaming .hd-content { width: 100%; height: auto; padding: 0 5% !important; }
  #hd .sec-gaming .console-content { margin-left: 0; }
  #hd .sec-gaming .console-content .hd-tag { margin-right: 0; } }
@media screen and (max-width: 480px) { #hd .sec-gaming .title-container h3 { font-size: 1.25em; }
  #hd .sec-gaming .hd-frame-container figure { width: 50px; }
  #hd .sec-gaming .hd-frame-container p { max-width: calc(100% - 80px); } }
#hd .sec-rate { background: black url(../img/rate/bg_144hz.jpg) right center no-repeat; background-size: auto 100%; position: relative; z-index: 2; }
#hd .sec-rate .hd-pd { width: 70%; margin-left: -6.6666%; position: relative; }
#hd .sec-rate .hd-pd img { width: 100%; }
#hd .sec-rate .frame-pos { position: absolute; }
#hd .sec-rate .frame-pos.pos-1 { top: 25%; left: 10%; }
#hd .sec-rate .frame-pos.pos-2 { top: 27.5%; right: 16%; }
#hd .sec-rate .hd-frame-container p strong { display: block; }
#hd .sec-rate .hd-content { width: 33%; }
#hd .sec-sync { padding: 6.25em 0; background: black; position: relative; z-index: 2; }
#hd .sec-sync .hd-content { padding-right: 10%; padding-bottom: 2.5em; }
#hd .sec-sync .icon-container { padding-top: 2em; }
#hd .sec-sync .icon-container img { margin-right: 3em; }
#hd .sec-sync figure .frame-pos { position: absolute; margin: 1.5em; }
#hd .sec-sync figure .hd-frame-container p { padding-left: .5em; }
#hd .sec-sync figure .hd-dot-frame:first-child .frame-pos { top: 0; left: 0; }
#hd .sec-sync figure .hd-dot-frame:last-child .frame-pos { top: 0; right: 0; }

@media screen and (max-width: 1280px) { #hd .sec-rate .hd-content { width: 35%; } }
@media screen and (max-width: 1024px) { #hd .sec-sync { padding: 4em 0; } }
@media screen and (max-width: 768px) { #hd .sec-rate { background: black; }
  #hd .sec-rate .hd-container { flex-direction: column-reverse; }
  #hd .sec-rate .hd-content { width: 100%; }
  #hd .sec-rate .hd-pd { width: 100%; }
  #hd .sec-rate .hd-frame-container figure { width: 60px; }
  #hd .sec-sync .hd-content { width: 100%; padding-bottom: 0; }
  #hd .sec-sync .icon-container { width: 100%; padding-top: 0; margin: 2em 0 3em; }
  #hd .sec-sync .icon-container img { margin-right: 2em; }
  #hd .sec-sync .icon-container img:last-child { margin-right: 0; }
  #hd .sec-sync figure .frame-pos { margin: .75em; } }
@media screen and (max-width: 620px) { #hd .sec-rate .hd-container { width: 100%; }
  #hd .sec-rate .hd-content { width: 90%; margin: 0 auto; }
  #hd .sec-rate .hd-pd { position: relative; overflow: hidden; }
  #hd .sec-rate .hd-pd > img { width: 125%; max-width: none !important; margin-left: -20%; margin-right: -5%; }
  #hd .sec-sync { padding: 2.5em 0; }
  #hd .sec-sync figure { flex-direction: column; }
  #hd .sec-sync .hd-dot-frame { width: 100%; }
  #hd .sec-sync .hd-dot-frame > .frame-content { position: relative; overflow: hidden; }
  #hd .sec-sync .hd-dot-frame > .frame-content img { width: 150%; max-width: none !important; margin: 0 -25%; }
  #hd .sec-sync .frame-pos { left: 0 !important; right: auto !important; } }
@media screen and (max-width: 480px) { #hd .sec-rate .hd-frame-container .frame-content { flex-direction: column; align-items: flex-start; }
  #hd .sec-rate .hd-frame-container figure { width: 50px; margin-bottom: 1em; }
  #hd .sec-rate .hd-frame-container p { width: 6em; padding-left: 0; }
  #hd .sec-rate .frame-pos.pos-1, #hd .sec-rate .frame-pos.pos-2 { top: auto; bottom: 0; }
  #hd .sec-sync .icon-container img { max-width: 30% !important; -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); } }
#hd .sec-hdr { padding: 6.25em 0; background: black; position: relative; overflow: hidden; }
#hd .sec-hdr .hd-wrapper { position: relative; }
#hd .sec-hdr .hd-pd { width: 56.1458%; margin-left: auto; position: relative; }
#hd .sec-hdr .hd-pd img { width: 100%; }
#hd .sec-hdr .hd-pd img.hd-cover { position: absolute; top: 0; right: 0; }
#hd .sec-hdr .hd-container { position: absolute; top: 0; left: 0; right: 0; }
#hd .sec-hdr .deco-left { width: 4.7584%; position: absolute; top: 3em; left: -7%; }
#hd .sec-hdr .deco-left img { width: 100%; }
#hd .sec-hdr .deco-left .hd-stripe { width: 37%; position: absolute; top: 18%; left: 0; right: 0; margin: 0 auto; }
#hd .sec-hdr .deco-left.hd-animated .hd-stripe .animate-container { -webkit-animation-delay: 0s; -webkit-animation-duration: 1s; -webkit-animation-name: stripe; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 5; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 1s; -moz-animation-name: stripe; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 5; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 1s; -o-animation-name: stripe; -o-animation-timing-function: linear; -o-animation-iteration-count: 5; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 1s; animation-name: stripe; animation-timing-function: linear; animation-iteration-count: 5; animation-fill-mode: both; }
#hd .sec-hdr .hd-content { padding-right: 5%; padding-top: 1em; }
#hd .sec-hdr .deco-list { display: flex; flex-direction: column; align-items: flex-start; margin-top: 4em; }
#hd .sec-hdr .deco-list > li { display: inline-block; }
#hd .sec-hdr .deco-list > li:nth-child(1) figure { max-width: 281px; }
#hd .sec-hdr .deco-list > li:nth-child(2) figure { max-width: 48px; }
#hd .sec-hdr .deco-list > li:nth-child(3) figure { max-width: 48px; }
#hd .sec-hdr .hd-animated .hd-frame-container:nth-child(1) { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -ms-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; }
#hd .sec-hdr .hd-animated .hd-frame-container:nth-child(1) .frame-content { -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; -ms-animation-delay: 0.25s; -o-animation-delay: 0.25s; animation-delay: 0.25s; }
#hd .sec-hdr .hd-animated .hd-frame-container:nth-child(2) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; }
#hd .sec-hdr .hd-animated .hd-frame-container:nth-child(2) .frame-content { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; animation-delay: 0.5s; }
#hd .sec-hdr .hd-animated .hd-frame-container:nth-child(3) { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -ms-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; }
#hd .sec-hdr .hd-animated .hd-frame-container:nth-child(3) .frame-content { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; -ms-animation-delay: 0.7s; -o-animation-delay: 0.7s; animation-delay: 0.7s; }

@media screen and (max-width: 1440px) { #hd .sec-hdr .deco-left { left: -4%; }
  #hd .sec-hdr .hd-content { padding-left: 2%; padding-right: 3%; } }
@media screen and (max-width: 1280px) { #hd .sec-hdr .hd-content { padding-left: 2%; padding-right: 0; }
  #hd .sec-hdr .deco-list { margin-top: 3em; } }
@media screen and (max-width: 1024px) { #hd .sec-hdr { padding: 4em 0; }
  #hd .sec-hdr .deco-list > li { display: inline-block; }
  #hd .sec-hdr .deco-list > li figure { flex-shrink: 0; }
  #hd .sec-hdr .deco-list > li:nth-child(1) figure { max-width: 250px; }
  #hd .sec-hdr .deco-list > li:nth-child(2) figure { max-width: 48px; } }
@media screen and (max-width: 768px) { #hd .sec-hdr .hd-wrapper { display: flex; flex-direction: column-reverse; }
  #hd .sec-hdr .hd-container { position: relative; }
  #hd .sec-hdr .hd-content { width: 100%; }
  #hd .sec-hdr .hd-pd { width: 95%; }
  #hd .sec-hdr .hd-frame-container p { width: auto; } }
@media screen and (max-width: 620px) { #hd .sec-hdr { padding: 2.5em 0; }
  #hd .sec-hdr .deco-list { margin-top: 1.5em; }
  #hd .sec-hdr .deco-list > li { width: 100%; } }
#hd .sec-elmb { padding: 0 0 3em; background: black; position: relative; }
#hd .sec-elmb .hd-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-elmb .toggle-container { margin-top: 2em; }
#hd .sec-elmb .toggle-container > li { display: inline-block; }
#hd .sec-elmb .hd-frame-container p { width: auto; padding-left: 0; padding-right: 1.5em; }
#hd .sec-elmb .target-container li { display: none; }
#hd .sec-elmb .target-container li.hd-active { display: block; }
#hd .sec-elmb .hd-pd { margin-top: -30%; margin-left: -10%; margin-right: 10%; position: relative; }
#hd .sec-elmb .hd-pd ul { width: 100%; max-width: 862px; margin: 0 auto; }
#hd .sec-elmb .hd-pd ul img { margin: 0 auto; }
#hd .sec-elmb .hd-content { padding-left: 1%; padding-bottom: 14%; }
#hd .sec-elmb .hd-content small { display: block; font-weight: 300; margin-top: .5em; }

@media screen and (min-width: 2560px) { #hd .sec-elmb .hd-pd ul { max-width: none; }
  #hd .sec-elmb .hd-pd img { width: 100%; } }
@media screen and (max-width: 1440px) { #hd .sec-elmb .hd-bg { position: relative; overflow: hidden; }
  #hd .sec-elmb .hd-bg img { width: 110%; max-width: none !important; margin-left: -5%; }
  #hd .sec-elmb .hd-pd { margin-top: -22%; margin-left: -7%; margin-right: 5%; }
  #hd .sec-elmb .hd-content { padding-bottom: 10%; } }
@media screen and (max-width: 1280px) { #hd .sec-elmb .hd-content { padding-left: 0; padding-bottom: 5%; } }
@media screen and (max-width: 768px) { #hd .sec-elmb .hd-container { width: 100%; display: flex; flex-direction: column-reverse; position: relative; }
  #hd .sec-elmb .hd-pd { width: 100%; margin: 0; position: relative; }
  #hd .sec-elmb .hd-pd ul { width: 80%; position: absolute; top: 2%; left: 0; right: 0; }
  #hd .sec-elmb .hd-content { width: 90%; margin: 0 auto; }
  #hd .sec-elmb .toggle-container > li { margin-right: 1em; }
  #hd .sec-elmb .hd-frame-container p { font-size: 1.125em; } }
#hd .sec-overdrive { padding-top: 3em; background: black url(../img/overdrive/bg_overdrive.jpg) center 2.5em no-repeat; background-size: 100% auto; position: relative; z-index: 2; }
#hd .sec-overdrive .hd-content { padding-left: 1%; margin-bottom: 3.5em; }
#hd .sec-overdrive .hd-wrapper { position: relative; }
#hd .sec-overdrive .overdrive-container { width: 97.5%; height: 90%; position: absolute; top: 3%; left: 0; right: 0; margin: 0 auto; }
#hd .sec-overdrive .overdrive-container:before { content: ''; display: block; width: 1px; height: 125%; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, #ffa800, transparent); background-image: -webkit-linear-gradient(180deg, transparent, #ffa800, transparent); background-image: linear-gradient(180deg, transparent, #ffa800, transparent); background-color: transparent; position: absolute; top: -25%; bottom: 0; left: 0; right: 0; margin: auto; z-index: 3; }
#hd .sec-overdrive .overdrive-container:after { content: ''; display: block; width: 100%; height: 40%; position: absolute; bottom: -2px; left: 0; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, black); background-image: -webkit-linear-gradient(180deg, transparent, black); background-image: linear-gradient(180deg, transparent, black); background-color: transparent; z-index: 4; pointer-events: none; }
#hd .sec-overdrive .vid-control { z-index: 5; }
#hd .sec-overdrive .hd-overdrive { width: 50%; position: relative; overflow: hidden; }
#hd .sec-overdrive .vid-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; z-index: 2; }
#hd .sec-overdrive video { width: 100%; position: absolute; top: -10%; bottom: -10%; left: 0; }
#hd .sec-overdrive .frame-pos { position: absolute; top: 0; margin: 2em; z-index: 2; }
#hd .sec-overdrive .frame-pos.pos-1 { left: 0; }
#hd .sec-overdrive .frame-pos.pos-2 { right: 0; }
#hd .sec-overdrive .hd-fps { width: 8em; position: absolute; bottom: 5%; left: 0; right: 0; margin: 0 auto; z-index: 5; }

@media screen and (max-width: 1800px) { #hd .sec-overdrive { background-size: 1800px; } }
@media screen and (max-width: 1440px) { #hd .sec-overdrive { background-size: 120%; }
  #hd .sec-overdrive .hd-content { width: 45%; } }
@media screen and (max-width: 1280px) { #hd .sec-overdrive .hd-content { width: 70%; } }
@media screen and (max-width: 1024px) { #hd .sec-overdrive { background-size: 125%; }
  #hd .sec-overdrive .hd-content { width: 80%; } }
@media screen and (max-width: 768px) { #hd .sec-overdrive { background: black; }
  #hd .sec-overdrive .hd-container { width: 100%; }
  #hd .sec-overdrive .hd-content { width: 90%; margin: 0 auto 3em; }
  #hd .sec-overdrive .overdrive-container { width: 100%; height: 90%; top: 1.8%; }
  #hd .sec-overdrive .overdrive-container:before { height: 115%; top: -20%; }
  #hd .sec-overdrive .overdrive-container:after { bottom: -10%; }
  #hd .sec-overdrive video { width: 126.5%; max-width: none; top: 0; bottom: auto; left: -13.25%; }
  #hd .sec-overdrive .frame-pos { margin: 1em; }
  #hd .sec-overdrive .hd-frame-container p { color: white !important; } }
@media screen and (max-width: 620px) { #hd .sec-overdrive .hd-frame-container p { width: 6em; white-space: normal; }
  #hd .sec-overdrive .hd-fps { width: 6.5em; } }
#hd .sec-enhancement { padding: 6.25em 0; background: black url(../img/enhancements/bg_enhancements.jpg) left top no-repeat; background-size: 100% auto; position: relative; z-index: 2; }
#hd .sec-enhancement .tab-filter { width: 100%; padding-right: 1em; margin-top: 2.5em; }
#hd .sec-enhancement .tab-filter li { padding: .5em 0; position: relative; cursor: pointer; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; }
#hd .sec-enhancement .tab-filter li:hover h3 { opacity: .75; }
#hd .sec-enhancement .tab-filter li.hd-active h3 { opacity: 1; }
#hd .sec-enhancement .tab-filter h3 { opacity: .5; letter-spacing: .04em; margin-bottom: 0; }
#hd .sec-enhancement .tab-content { display: none; }
#hd .sec-enhancement .tab-content.hd-active { display: block; }
#hd .sec-enhancement .hd-content { width: 68%; margin-bottom: 3.5em; padding-right: 5%; }
#hd .sec-enhancement .frame-pos { position: absolute; margin: 1.5em; }
#hd .sec-enhancement .hd-frame-container p { padding-left: .5em; }
#hd .sec-enhancement .hd-dot-frame:first-child .frame-pos { top: 0; left: 0; }
#hd .sec-enhancement .hd-dot-frame:last-child .frame-pos { top: 0; right: 0; }
#hd .sec-enhancement .filter-trigger { margin: 1.5em auto 0; }
#hd .sec-enhancement .filter-trigger li { cursor: pointer; }
#hd .sec-enhancement .filter-trigger li h5 { opacity: .75; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
#hd .sec-enhancement .filter-trigger li:hover h5 { opacity: .9; }
#hd .sec-enhancement .filter-trigger li.hd-active .hd-icon { background-position: 100% 0; }
#hd .sec-enhancement .filter-trigger li.hd-active h5 { opacity: 1; }
#hd .tab-boost .hd-img { padding-right: 5%; }
#hd .tab-gameplus .hd-img { padding-right: 5%; }
#hd .tab-gameplus .hd-dot-frame { border-right-width: 1px; margin: 0; }
#hd .tab-gameplus .frame-content img { width: 100%; }
#hd .tab-gameplus .filter-trigger { width: 98%; }
#hd .tab-gameplus .filter-target li { opacity: 0; -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
#hd .tab-gameplus .filter-target li img { position: absolute; top: 0; left: 0; }
#hd .tab-gameplus .filter-target li.hd-active { opacity: 1; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; }
#hd .tab-gameplus .hd-icon { width: 80px; height: 80px; margin: 0 auto; background-position: 0 0; background-size: 200%; }
#hd .tab-gameplus .hd-icon.icon-sniper { background-image: url(../img/gameplus/ic_sniper.jpg); }
#hd .tab-gameplus .hd-icon.icon-crosshair { background-image: url(../img/gameplus/ic_crosshair.jpg); }
#hd .tab-gameplus .hd-icon.icon-timer { background-image: url(../img/gameplus/ic_timer.jpg); }
#hd .tab-gameplus .hd-icon.icon-fps { background-image: url(../img/gameplus/ic_fps.jpg); }
#hd .tab-gameplus .hd-icon.icon-display { background-image: url(../img/gameplus/ic_display-alignment.jpg); }
#hd .tab-gameplus .hd-icon.icon-display-1 { background-image: url(../img/gameplus/ic_sniper-1.jpg); }
#hd .tab-gameplus h5 { font-family: "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: .9em; letter-spacing: 0; margin-top: .5em; }
#hd .tab-gamevisual .filter-trigger { margin-bottom: 2em; }
#hd .tab-gamevisual .filter-trigger h5 { padding: .5em .5em 0; margin-right: .5em; margin-bottom: .125em; line-height: 1; color: #777777 0%, #F7F7F7 20%, #A4A4A4 100% !important; position: relative; z-index: 2; }
#hd .tab-gamevisual .filter-trigger .hd-active h5 { color: black !important; }
#hd .tab-gamevisual .filter-trigger .hd-active h5:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 168, 0, 0.95); clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); z-index: -1; }
#hd .tab-gamevisual .target-img li { display: none; }
#hd .tab-gamevisual .target-img li.hd-active { display: block; }
#hd .tab-gamevisual .target-img img { width: 100%; }
#hd .tab-gamevisual .target-txt { margin-top: 1.5em; }
#hd .tab-gamevisual .target-txt li { display: none; }
#hd .tab-gamevisual .target-txt li.hd-active { display: block; opacity: .6; }
#hd .tab-flickerfree .hd-tag, #hd .tab-ultralow .hd-tag { margin-right: -10%; }
#hd .tab-flickerfree .hd-img, #hd .tab-ultralow .hd-img { padding-right: 7%; margin-bottom: 1.5em; }
#hd .tab-flickerfree .hd-img img, #hd .tab-ultralow .hd-img img { width: 100%; }

@media screen and (max-width: 1800px) { #hd .sec-enhancement { background-size: 75% auto; } }
@media screen and (max-width: 1440px) { #hd .sec-enhancement .hd-content { width: 80%; margin-bottom: 2em; }
  #hd .tab-boost .hd-img { padding-right: 0; }
  #hd .tab-gameplus .hd-img { padding-right: 0; }
  #hd .tab-gamevisual .target-txt { width: 80%; } }
@media screen and (max-width: 1024px) { #hd .sec-enhancement { padding: 4em 0; }
  #hd .sec-enhancement .hd-content { width: 100%; }
  #hd .tab-gameplus .hd-icon { width: 80px; height: 80px; }
  #hd .tab-flickerfree .hd-content img, #hd .tab-ultralow .hd-content img { margin: 1.5em 0; }
  #hd .tab-gamevisual .target-txt { width: 100%; }
  #hd .tab-flickerfree .hd-img, #hd .tab-ultralow .hd-img { padding-right: 0; } }
@media screen and (max-width: 768px) { #hd .sec-enhancement { background: black; padding: 4em 0; }
  #hd .sec-enhancement .hd-wrapper { width: 100%; }
  #hd .sec-enhancement .hd-wrapper > .hd-col33 { width: 100%; }
  #hd .sec-enhancement .hd-wrapper > .hd-col33 > h3 { width: 90%; margin: 0 auto; }
  #hd .sec-enhancement .tab-filter { display: flex; flex-wrap: nowrap; align-items: flex-start; background: #111111; padding: 0 calc(5% - 1em); margin: 1em 0 1.5em; position: relative; overflow-x: auto; }
  #hd .sec-enhancement .tab-filter::-webkit-scrollbar { height: 2px; }
  #hd .sec-enhancement .tab-filter::-webkit-scrollbar-track { background: #111; }
  #hd .sec-enhancement .tab-filter::-webkit-scrollbar-thumb { background: #333; }
  #hd .sec-enhancement .tab-filter::-webkit-scrollbar-thumb:hover { background: #555; }
  #hd .sec-enhancement .tab-filter li { flex-shrink: 0; padding: 1em; }
  #hd .sec-enhancement .tab-filter li h3 { font-size: 1.25em; }
  #hd .sec-enhancement .tab-container { width: 90%; margin: 0 auto; }
  #hd .sec-enhancement .hd-content { padding-right: 0; }
  #hd .tab-gameplus .filter-trigger { width: 100%; }
  #hd .tab-gameplus .filter-trigger li h5 { font-size: .75em; }
  #hd .tab-gamevisual .hd-content h5 { font-size: 1.125em; }
  #hd .tab-gamevisual .frame-pos { margin: .75em; }
  #hd .tab-flickerfree .hd-tag, #hd .tab-ultralow .hd-tag { margin-right: 0; }
  #hd .tab-flickerfree .frame-pos, #hd .tab-ultralow .frame-pos { margin: .75em; } }
@media screen and (max-width: 620px) { #hd .sec-enhancement { padding: 2em 0; }
  #hd .sec-enhancement .hd-dot-frame { width: 100%; }
  #hd .sec-enhancement .hd-dot-frame:last-child .frame-pos { left: 0; right: auto; }
  #hd .sec-enhancement .hd-dot-frame > .frame-content { position: relative; overflow: hidden; }
  #hd .tab-boost .hd-dot-frame > .frame-content img { margin-bottom: -40%; }
  #hd .tab-gameplus .hd-icon { width: 60px; height: 60px; }
  #hd .tab-gameplus .filter-trigger { width: 110%; margin-left: -5%; }
  #hd .tab-gameplus .filter-trigger li h5 { font-size: .6em; }
  #hd .tab-gameplus .hd-dot-frame { border-bottom-width: 1px; }
  #hd .tab-gamevisual .filter-trigger li { margin-right: 0; margin-bottom: .5em; }
  #hd .tab-gamevisual .filter-trigger h5 { font-size: 1.125em; }
  #hd .tab-gamevisual .hd-dot-frame > .frame-content { position: relative; overflow: hidden; }
  #hd .tab-gamevisual .hd-dot-frame > .frame-content img { margin: -6% 0; }
  #hd .tab-flickerfree .hd-dot-frame > .frame-content, #hd .tab-ultralow .hd-dot-frame > .frame-content { position: relative; overflow: hidden; }
  #hd .tab-flickerfree .hd-dot-frame > .frame-content img, #hd .tab-ultralow .hd-dot-frame > .frame-content img { margin: -15% 0; }
  #hd .tab-flickerfree .hd-logo, #hd .tab-ultralow .hd-logo { margin: 0 auto; } }
#hd .sec-connectivity { padding: 6.25em 0; background: black; position: relative; overflow: hidden; z-index: 2; }
#hd .sec-connectivity .tab-filter { width: 100%; padding-right: 1em; margin-top: 2.5em; }
#hd .sec-connectivity .tab-filter li { padding: .5em 0; position: relative; cursor: pointer; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; }
#hd .sec-connectivity .tab-filter li:hover h3 { opacity: .75; }
#hd .sec-connectivity .tab-filter li.hd-active h3 { opacity: 1; }
#hd .sec-connectivity .tab-filter h3 { opacity: .5; letter-spacing: .04em; margin-bottom: 0; }
#hd .sec-connectivity .tab-content { display: none; }
#hd .sec-connectivity .tab-content.hd-active { display: block; }
#hd .tab-connectivity .hd-content { width: 60%; margin-bottom: 3em; }
#hd .tab-connectivity .hd-content .hd-tag { margin-right: -10%; }
#hd .tab-connectivity .hd-img { margin-right: -10%; position: relative; }
#hd .tab-connectivity .hd-img img { width: 100%; }
#hd .tab-connectivity .hd-img ul { position: absolute; bottom: 24%; left: 0; right: 6%; margin: 0 auto; }
#hd .tab-connectivity .hd-img li { width: 51px; margin: .5em .75em; }
#hd .tab-connectivity .hd-img li:last-child { width: 74px; }
#hd .tab-design .hd-content { width: 25.5em; position: relative; z-index: 2; }
#hd .tab-design .hd-content .hd-tag { margin-right: -5%; }
#hd .tab-design .hd-img { margin-top: -38%; margin-right: -38%; }
#hd .tab-design .item { position: relative; }
#hd .tab-design .item > img { width: 100%; }
#hd .tab-design .frame-pos { position: absolute; bottom: calc(21% + 3em); left: 0; margin-bottom: 1em; }
#hd .tab-design .hd-frame-container { width: auto; height: auto; opacity: 1; -webkit-animation-name: none; -moz-animation-name: none; -ms-animation-name: none; -o-animation-name: none; animation-name: none; }
#hd .tab-design .hd-frame-container figure { width: 70px; }
#hd .tab-design .hd-frame-container p { width: auto; white-space: nowrap; }
#hd .tab-design .owl-nav { position: absolute; pointer-events: none; bottom: 21%; }
#hd .tab-design .owl-prev, #hd .tab-design .owl-next { display: inline-block; vertical-align: middle; width: 2.8125em; height: 2.8125em; background: url(../img/design/arrow_next.svg) 0 0 no-repeat; background-size: contain; margin-right: 1em; pointer-events: all; }
#hd .tab-design .owl-prev.disabled, #hd .tab-design .owl-next.disabled { opacity: .3; pointer-events: none; }
#hd .tab-design .owl-prev { -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); }

@media screen and (min-width: 2560px) { #hd .sec-connectivity .hd-img li { width: 102px; }
  #hd .sec-connectivity .hd-img li:last-child { width: 148px; } }
@media screen and (max-width: 1800px) { #hd .tab-design .hd-content { width: 30em; }
  #hd .tab-design .hd-img { margin-top: -27%; margin-right: -25%; }
  #hd .tab-design .item { padding-left: 12%; }
  #hd .tab-design .frame-pos { bottom: calc(13% + 3em); }
  #hd .tab-design .owl-nav { bottom: 13%; } }
@media screen and (max-width: 1440px) { #hd .tab-connectivity .hd-content { width: 80%; margin-bottom: 2em; }
  #hd .tab-design .hd-content { width: 80%; margin-bottom: 2em; }
  #hd .tab-design .hd-img { margin-top: -25%; } }
@media screen and (max-width: 1280px) { #hd .tab-design .item { padding-left: 20%; }
  #hd .tab-design .frame-pos { bottom: calc(10% + 3em); }
  #hd .tab-design .owl-nav { bottom: 10%; }
  #hd .tab-design .hd-frame-container figure { width: 40px; } }
@media screen and (max-width: 1024px) { #hd .sec-connectivity { padding: 4em 0; }
  #hd .tab-connectivity .hd-content { width: 100%; }
  #hd .tab-connectivity .hd-content h2 { margin-right: 0; }
  #hd .tab-design .hd-content { width: 100%; }
  #hd .tab-design .hd-content h2 { margin-right: 0; }
  #hd .tab-design .hd-frame-container { padding: .75em 1em; } }
@media screen and (max-width: 768px) { #hd .sec-connectivity .hd-wrapper { width: 100%; }
  #hd .sec-connectivity .hd-wrapper > .hd-col33 { width: 100%; }
  #hd .sec-connectivity .hd-wrapper > .hd-col33 > h3 { width: 90%; margin: 0 auto; }
  #hd .sec-connectivity .tab-filter { display: flex; flex-wrap: nowrap; align-items: flex-start; background: #111111; padding: 0 calc(5% - 1em); margin: 1em 0 1.5em; position: relative; overflow-x: auto; }
  #hd .sec-connectivity .tab-filter::-webkit-scrollbar { height: 2px; }
  #hd .sec-connectivity .tab-filter::-webkit-scrollbar-track { background: #111; }
  #hd .sec-connectivity .tab-filter::-webkit-scrollbar-thumb { background: #333; }
  #hd .sec-connectivity .tab-filter::-webkit-scrollbar-thumb:hover { background: #555; }
  #hd .sec-connectivity .tab-filter li { flex-shrink: 0; padding: 1em; }
  #hd .sec-connectivity .tab-filter li h3 { font-size: 1.25em; }
  #hd .sec-connectivity .tab-container { width: 90%; margin: 0 auto; }
  #hd .tab-connectivity .hd-img { margin-right: 0; }
  #hd .tab-connectivity .hd-img ul { right: 0; bottom: 0; }
  #hd .tab-design .hd-img { margin-right: -5%; margin-top: -15%; }
  #hd .tab-design .item { padding-left: 10%; }
  #hd .tab-design .frame-pos { bottom: 3em; }
  #hd .tab-design .owl-nav { bottom: 0; }
  #hd .tab-design .hd-frame-container figure { width: 40px; } }
@media screen and (max-width: 620px) { #hd .tab-design .hd-img { margin-right: 0; }
  #hd .tab-design .item { padding-left: 0; text-align: center; position: relative; overflow: hidden; }
  #hd .tab-design .item > img { width: 110%; max-width: none !important; margin-left: -5%; }
  #hd .tab-design .frame-pos { display: inline-block; position: relative; bottom: auto; }
  #hd .tab-design .owl-nav { position: relative; text-align: center; } }
@media screen and (max-width: 480px) { #hd .tab-connectivity .hd-img ul { position: relative; margin: 0 -5%; }
  #hd .tab-connectivity .hd-img li { width: 18%; padding: 0 .5em; margin: 0 0 1em; }
  #hd .tab-connectivity .hd-img li:last-child { width: 24.5%; } }

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