@import url(../lib/swiper/swiper-bundle.min.css);
@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto.css");
#hd { --border-radius: 20px; }
@media screen and (max-width: 768px) { #hd { --border-radius: 16px; } }
@media screen and (max-width: 620px) { #hd { --border-radius: 12px; } }

/*  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: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", 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: #ff9e1b; }
#hd * ::-moz-selection { background: #1d2124; color: #ff9e1b; }
#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 #ff9e1b; }
#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; transform: scale(1, 0); }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; transform: scale(1, 0); }
  100% { opacity: 1; transform: scale(1, 1); } }
@-moz-keyframes revealFrame { 0% { opacity: 0; transform: scale(1, 0); }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; transform: scale(1, 0); }
  100% { opacity: 1; transform: scale(1, 1); } }
@-ms-keyframes revealFrame { 0% { opacity: 0; transform: scale(1, 0); }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; transform: scale(1, 0); }
  100% { opacity: 1; transform: scale(1, 1); } }
@-o-keyframes revealFrame { 0% { opacity: 0; transform: scale(1, 0); }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; transform: scale(1, 0); }
  100% { opacity: 1; transform: scale(1, 1); } }
@keyframes revealFrame { 0% { opacity: 0; transform: scale(1, 0); }
  25% { opacity: 1; }
  50% { opacity: 0; }
  75% { opacity: 1; transform: scale(1, 0); }
  100% { opacity: 1; transform: scale(1, 1); } }
@-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; } }
@-webkit-keyframes flicker-less-arrow-top { 100% { -moz-transform: translateY(-40%); -o-transform: translateY(-40%); -ms-transform: translateY(-40%); -webkit-transform: translateY(-40%); transform: translateY(-40%); } }
@-moz-keyframes flicker-less-arrow-top { 100% { -moz-transform: translateY(-40%); -o-transform: translateY(-40%); -ms-transform: translateY(-40%); -webkit-transform: translateY(-40%); transform: translateY(-40%); } }
@-ms-keyframes flicker-less-arrow-top { 100% { -moz-transform: translateY(-40%); -o-transform: translateY(-40%); -ms-transform: translateY(-40%); -webkit-transform: translateY(-40%); transform: translateY(-40%); } }
@-o-keyframes flicker-less-arrow-top { 100% { -moz-transform: translateY(-40%); -o-transform: translateY(-40%); -ms-transform: translateY(-40%); -webkit-transform: translateY(-40%); transform: translateY(-40%); } }
@keyframes flicker-less-arrow-top { 100% { -moz-transform: translateY(-40%); -o-transform: translateY(-40%); -ms-transform: translateY(-40%); -webkit-transform: translateY(-40%); transform: translateY(-40%); } }
@-webkit-keyframes flicker-less-arrow-bottom {}
@-moz-keyframes flicker-less-arrow-bottom {}
@-ms-keyframes flicker-less-arrow-bottom {}
@-o-keyframes flicker-less-arrow-bottom {}
@-webkit-keyframes flicker-less-bar { 100% { height: 35%; } }
@-moz-keyframes flicker-less-bar { 100% { height: 35%; } }
@-ms-keyframes flicker-less-bar { 100% { height: 35%; } }
@-o-keyframes flicker-less-bar { 100% { height: 35%; } }
@keyframes flicker-less-bar { 100% { height: 35%; } }
@-webkit-keyframes crosshair-cover-green { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes crosshair-cover-green { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes crosshair-cover-green { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes crosshair-cover-green { 50% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes crosshair-cover-green { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes crosshair-bg { 50% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-moz-keyframes crosshair-bg { 50% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-ms-keyframes crosshair-bg { 50% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-o-keyframes crosshair-bg { 50% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@keyframes crosshair-bg { 50% { -moz-transform: translate(-10%, 0); -o-transform: translate(-10%, 0); -ms-transform: translate(-10%, 0); -webkit-transform: translate(-10%, 0); transform: translate(-10%, 0); }
  100% { -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); } }
@-webkit-keyframes boost-cover-2 { 25% { opacity: 1; }
  100% { opacity: 1; } }
@-moz-keyframes boost-cover-2 { 25% { opacity: 1; }
  100% { opacity: 1; } }
@-ms-keyframes boost-cover-2 { 25% { opacity: 1; }
  100% { opacity: 1; } }
@-o-keyframes boost-cover-2 { 25% { opacity: 1; }
  100% { opacity: 1; } }
@keyframes boost-cover-2 { 25% { opacity: 1; }
  100% { opacity: 1; } }
@-webkit-keyframes boost-cover-3 { 25% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; } }
@-moz-keyframes boost-cover-3 { 25% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; } }
@-ms-keyframes boost-cover-3 { 25% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; } }
@-o-keyframes boost-cover-3 { 25% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; } }
@keyframes boost-cover-3 { 25% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; } }
@-webkit-keyframes boost-cover-4 { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes boost-cover-4 { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes boost-cover-4 { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes boost-cover-4 { 50% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes boost-cover-4 { 50% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); -o-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); -o-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); -o-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); -o-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); -o-transform: translateX(-50px); -ms-transform: translateX(-50px); -webkit-transform: translateX(-50px); transform: translateX(-50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); -o-transform: translateX(50px); -ms-transform: translateX(50px); -webkit-transform: translateX(50px); transform: translateX(50px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@font-face { font-family: 'MachineBT'; src: url("../fonts/MachineBT.woff"), url("../fonts/MachineBT.ttf"); font-weight: normal; font-style: normal; font-display: swap; }
#hd { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 16px; }
#hd h2, #hd .h2 { font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 4.5em; letter-spacing: .018em; line-height: 1.125; color: #ffffff !important; word-break: normal; word-wrap: normal; margin-bottom: .5em; text-transform: uppercase; }
#hd h2.color-primary, #hd .h2.color-primary { color: #ff9e1b !important; }
#hd .hd-title-main { margin-bottom: 0.25em; }
#hd .hd-title-main small { display: inline-block; font-size: 1.6rem; padding-top: 0.25em; padding-left: 0.2em; margin-bottom: 1.5em; position: relative; }
#hd .hd-title-main small .hd-deco { display: block; width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0; -moz-transform: scale(1.1, 1.5); -o-transform: scale(1.1, 1.5); -ms-transform: scale(1.1, 1.5); -webkit-transform: scale(1.1, 1.5); transform: scale(1.1, 1.5); transition: transform .4s .1s, opacity .25s .1s; }
#hd .hd-title-main small .hd-deco:before, #hd .hd-title-main small .hd-deco:after { content: ''; display: block; width: 4px; height: 4px; border: 2px none #ff9e1b; position: absolute; margin: 0 2px; }
#hd .hd-title-main small .hd-deco:before { right: 100%; border-left-style: solid; }
#hd .hd-title-main small .hd-deco:after { left: 100%; border-right-style: solid; }
#hd .hd-title-main small .hd-deco.deco-top:before, #hd .hd-title-main small .hd-deco.deco-top:after { border-bottom-style: solid; bottom: 100%; }
#hd .hd-title-main small .hd-deco.deco-bottom:before, #hd .hd-title-main small .hd-deco.deco-bottom:after { border-top-style: solid; top: 100%; }
#hd .hd-title-main small.is-animated .hd-deco { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .hd-title-main strong { display: block; }
#hd h3, #hd .h3 { font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 1.5em; color: #ffffff !important; letter-spacing: .2em; line-height: 1.125; margin-bottom: .5em; text-transform: uppercase; }
#hd h3.color-primary, #hd .h3.color-primary { color: #ff9e1b !important; }
#hd h4, #hd .h4 { font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 2.375em; font-weight: bold; letter-spacing: 0; line-height: 1.2; margin-bottom: -.35em; }
#hd h5, #hd .h5 { font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 1.25em; letter-spacing: .04em; font-weight: 400; line-height: 1.25; text-transform: uppercase; }
#hd h6, #hd .h6 { font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: .875em; font-weight: 400; line-height: 1.5; }
#hd p, #hd small, #hd a, #hd li { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; }
#hd p { font-size: 1.125em; line-height: 1.7; letter-spacing: .02em; font-weight: 400; }
#hd b { font-weight: bold; }
#hd strong { font-family: inherit; }
#hd small { font-size: .875em; font-weight: 400; letter-spacing: 0.5px; }
#hd .align-center { text-align: center; }
#hd .align-left { text-align: left; }
#hd .align-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: #ff9e1b; }
#hd .color-grey { color: #d1d1d1 !important; }
#hd .color-dark { color: #888888 !important; }
#hd .color-gradient { display: inline-block; color: #ff9e1b !important; background-color: white 40%; background-image: -moz-linear-gradient(180deg, white 40%, #ff9e1b 40%); background-image: -webkit-linear-gradient(180deg, white 40%, #ff9e1b 40%); background-image: linear-gradient(180deg, white 40%, #ff9e1b 40%); background-size: 100% 1.125em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#hd .color-gradient::selection { -webkit-background-clip: text; -webkit-text-fill-color: #ff9e1b; }
#hd .color-gradient::-moz-selection { -webkit-background-clip: text; -webkit-text-fill-color: #ff9e1b; }
#hd .color-gradient-smooth { display: inline-block; color: #ff9e1b !important; background-color: #ff9e1b; background-image: -moz-linear-gradient(180deg, #ff9e1b, white 50%); background-image: -webkit-linear-gradient(180deg, #ff9e1b, white 50%); background-image: linear-gradient(180deg, #ff9e1b, white 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#hd .color-gradient-smooth::selection { -webkit-background-clip: text; -webkit-text-fill-color: #ff9e1b; }
#hd .color-gradient-smooth::-moz-selection { -webkit-background-clip: text; -webkit-text-fill-color: #ff9e1b; }
#hd .font-tuf { font-family: "KairosSansCondensedMedium", "MachineBT", "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; }
#hd .font-tuf-bold { font-family: "KairosSansCondensedBold", "MachineBT", "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; }
#hd .hd-uppercase { text-transform: uppercase; }
#hd .nobr { white-space: nowrap; }
#hd .hd-note { margin-top: 0.5em !important; }
#hd .hd-note small { display: block; line-height: 1.25; }

/*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, #hd .h2 { font-size: 3.25em; } }
@media screen and (max-width: 1024px) { #hd h2, #hd .h2 { font-size: 2.75em; }
  #hd .hd-title-main .h3 { font-size: 1.25rem; }
  #hd h3, #hd .h3 { font-size: 1.25em; }
  #hd p { font-size: 1em; } }
@media screen and (max-width: 480px) { #hd h2, #hd .h2 { font-size: 1.875em; margin: .35em 0 .875em; }
  #hd .hd-title-main .h3 { font-size: 1.125rem; }
  #hd h3, #hd .h3 { font-size: 1.125em; line-height: 1.2; }
  #hd p { font-size: .9em; } }
#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: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col30 { width: 30%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col35 { width: 35%; }
#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-w900, #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1280, #hd .hd-w1366, #hd .hd-w1520, #hd .hd-w1680 { 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: #ff9e1b; border: 1px solid #ff9e1b; 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: #ff9e1b; color: black; }
#hd .hd-dot-frame { display: inline-block; border: 1px solid #ff9e1b; position: relative; z-index: 2; }
#hd .hd-dot-frame.hd-col50:first-child { margin-right: -1px; border-right-width: 0px; }
#hd .hd-dot-frame.hd-col50: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: 5px; height: 5px; background: #ff9e1b; margin: -2px; 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 img { width: 100%; }
#hd .hd-dot-frame .frame-pos { display: flex; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; margin: 10px auto; }
#hd .hd-dot-frame .frame-pos .bg-black { background: rgba(0, 0, 0, 0.7); }
#hd .hd-dot-frame .frame-pos .bg-white { background: rgba(255, 255, 255, 0.1); }
#hd .hd-dot-frame .frame-pos .frame-content { padding: 8px 20px; }
#hd .hd-dot-frame .frame-pos .frame-content strong { font-weight: bold; }
#hd .hd-dot-frame .frame-pos p { font-size: 1em; }
#hd .is-animated .swiper-slide-active .frame-pos { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.8s; -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.8s; -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.8s; -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.8s; animation-name: revealFrame; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }
#hd .is-animated .swiper-slide-active .frame-pos .frame-content { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.8s; -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.8s; -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.8s; -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.8s; animation-name: revealFrameContent; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; }

/* iPad Pro Portrait */
@media screen and (max-width: 620px) { #hd .hd-dot-frame.hd-col50 { width: 100%; }
  #hd .hd-dot-frame.hd-col50:first-child { border-right-width: 1px; border-bottom-width: 0; margin-right: 0; margin-bottom: -1px; }
  #hd .hd-dot-frame.hd-col50:last-child { margin-left: 0; } }
#hd .hd-lightbox { width: 100%; height: 100vh; padding: 20px; position: fixed; top: 0; left: 0; display: none; z-index: 1000; }
#hd .hd-lightbox .hd-filter { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; }
#hd .hd-lightbox .hd-box { width: 1280px; height: auto; max-width: 90%; max-height: 720px; background: black; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 70px; box-sizing: border-box; }
#hd .hd-lightbox .vid-container { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; }
#hd .hd-lightbox .vid-container iframe { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: contain; }
#hd .hd-lightbox .hd-close { width: 4em; height: 4em; position: absolute; bottom: 100%; right: 0; cursor: pointer; z-index: 2; }
#hd .hd-lightbox .hd-close:before, #hd .hd-lightbox .hd-close:after { content: ''; display: block; width: 1.5em; 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:before { -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
#hd .hd-lightbox .hd-close:after { -moz-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
#hd .trigger-play { cursor: pointer; }

@media (min-aspect-ratio: 16 / 9) and (max-height: 800px) { #hd .hd-vid-lightbox .hd-box { width: 90%; max-width: 1280px; height: calc(100% - 100px); margin-top: 50px; }
  #hd .hd-vid-lightbox .vid-container { height: 100%; padding-bottom: 0; } }
@media screen and (max-width: 1024px) { #hd .hd-lightbox .hd-box { margin-top: 50px; }
  #hd .hd-lightbox .hd-close { width: 2.75em; height: 2.75em; }
  #hd .hd-lightbox .hd-close:before, #hd .hd-lightbox .hd-close:after { width: 1.25em; height: 2px; } }
@media screen and (max-width: 620px) { #hd .hd-lightbox .hd-box { width: 100%; } }
#hd .hd-intro p { max-width: 56em; margin: 0 auto; }
#hd .list-feature { margin-top: 4%; margin-bottom: 7%; }
#hd .list-feature > li { padding: 0 2.5%; margin-bottom: 4px; }
#hd .list-feature .hd-frame { padding: 0 20px; border: 1px solid rgba(255, 158, 27, 0.5); }
#hd .list-feature .hd-frame .hd-deco:before, #hd .list-feature .hd-frame .hd-deco:after { content: ''; display: block; width: 5px; height: 5px; background: #ff9e1b; border: 1px solid #ff9e1b; position: absolute; margin: -3px; z-index: 2; transition: transform .25s .6s; -moz-transform: scale(0, 0); -o-transform: scale(0, 0); -ms-transform: scale(0, 0); -webkit-transform: scale(0, 0); transform: scale(0, 0); }
#hd .list-feature .hd-frame .hd-deco:before { left: 0; }
#hd .list-feature .hd-frame .hd-deco:after { right: 0; }
#hd .list-feature .hd-frame .deco-top:before, #hd .list-feature .hd-frame .deco-top:after { top: 0; }
#hd .list-feature .hd-frame .deco-bottom:before, #hd .list-feature .hd-frame .deco-bottom:after { bottom: 0; }
#hd .list-feature .hd-frame.is-animated .hd-deco { opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .list-feature .hd-frame.is-animated .hd-deco:before, #hd .list-feature .hd-frame.is-animated .hd-deco:after { -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 .list-feature .h2 { font-size: 3.25em; padding-top: 0.2em; margin-bottom: 0; }
#hd .frame-border { border: 1px solid rgba(255, 158, 27, 0.5); padding: 16px; }
#hd .frame-border img { width: 100%; }
#hd .hd-compare-mark-container { margin-top: 16px; }
#hd .hd-compare-mark-container .hd-mark { display: flex; flex-wrap: nowrap; padding: 10px 24px 4px 18px; background: rgba(255, 158, 27, 0.5); clip-path: polygon(0 0, 100% 0, 100% calc(100% - .4em), calc(100% - .4em) 100%, 0 100%); font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 1.6em; letter-spacing: .018em; position: relative; z-index: 2; }
#hd .hd-compare-mark-container .hd-mark:before { content: ''; width: calc(100% - 2px); height: calc(100% - 2px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - .4em), calc(100% - .4em) 100%, 0 100%); position: absolute; inset: 0; margin: auto; background: black; z-index: -1; }
#hd .hd-compare-mark-container .hd-mark img { width: .75em; margin-right: .6em; margin-top: -0.25em; }
#hd .hd-tablist-scroller { margin-top: 5%; margin-bottom: 3%; padding-top: 1px; padding-bottom: 3px; position: relative; overflow-y: hidden; overflow-x: auto; }
#hd .hd-tablist-scroller::-webkit-scrollbar { height: 0; }
#hd .hd-tablist-scroller::-webkit-scrollbar-track { background: black; }
#hd .hd-tablist-scroller::-webkit-scrollbar-thumb { background: #777; }
#hd .hd-tablist-scroller::-webkit-scrollbar-thumb:hover { background: #eee; }
#hd .hd-tablist-scroller:after { content: ''; display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.75); position: sticky; left: 0; }
#hd .hd-tablist { position: relative; z-index: 2; }
#hd .hd-tablist:before, #hd .hd-tablist:after { content: ''; display: block; width: 16px; height: 32px; background: url(../img/deco-tablist.png) center no-repeat; background-size: contain; position: absolute; top: 0; margin: auto 2px -2px; }
#hd .hd-tablist:before { left: 0; }
#hd .hd-tablist:after { right: 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); }
#hd .hd-tablist button { flex-shrink: 0; cursor: pointer; display: inline-block; min-width: 20em; position: relative; z-index: 2; }
#hd .hd-tablist button span { display: inline-block; font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 1.875em; padding: .25em .5em; color: white; position: relative; }
#hd .hd-tablist button span:after { content: ''; display: block; width: 100%; height: 7px; background: #ff9e1b; position: absolute; top: 100%; left: 0; bottom: 0; margin-top: -3px; transition: transform .25s; -moz-transform: scale(1, 0); -o-transform: scale(1, 0); -ms-transform: scale(1, 0); -webkit-transform: scale(1, 0); transform: scale(1, 0); }
#hd .hd-tablist button[aria-selected="true"] { cursor: default; pointer-events: none; }
#hd .hd-tablist button[aria-selected="true"] span:after { -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-swiper { position: relative; overflow: hidden; }
#hd .swiper-panel { overflow: visible; }
#hd .swiper-panel .swiper-slide { height: auto; padding: 5%; position: relative; background: #181818; }
#hd .swiper-panel .swiper-slide > .deco-dots { width: 2.6%; position: absolute; top: 0; right: 0; margin: 3%; opacity: 0; }
#hd .swiper-panel .swiper-slide .hd-txt { width: 90%; max-width: 44em; margin: 0 auto 3%; }
#hd .swiper-panel .swiper-slide [role="tabpanel"] { width: 80%; max-width: 800px; margin: 0 auto; }
#hd .swiper-panel .swiper-slide.swiper-slide-active .deco-dots { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 0.4s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .hd-frame-dot { position: relative; border: 1px solid rgba(255, 158, 27, 0.5); }
#hd .hd-frame-dot > .hd-deco:before, #hd .hd-frame-dot > .hd-deco:after { content: ''; display: block; width: 7px; height: 7px; background: #ff9e1b; border: 1px solid #ff9e1b; position: absolute; margin: -4px; z-index: 2; }
#hd .hd-frame-dot > .hd-deco:before { left: 0; }
#hd .hd-frame-dot > .hd-deco:after { right: 0; }
#hd .hd-frame-dot > .deco-top:before, #hd .hd-frame-dot > .deco-top:after { top: 0; }
#hd .hd-frame-dot > .deco-bottom:before, #hd .hd-frame-dot > .deco-bottom:after { bottom: 0; }

@media screen and (min-width: 2560px) { #hd .swiper-panel .swiper-slide [role="tabpanel"] { max-width: 1000px; } }
@media screen and (min-width: 3000px) { #hd .swiper-panel .swiper-slide [role="tabpanel"] { max-width: 1400px; } }
@media screen and (max-width: 1440px) { #hd .list-feature .h2 { font-size: 2.75em; } }
@media screen and (max-width: 1280px) { #hd .hd-compare-mark-container .hd-mark { padding-left: 16px; padding-right: 20px; font-size: 1.4em; } }
@media screen and (max-width: 1024px) { #hd .list-feature .h2 { font-size: 2em; }
  #hd .frame-border { padding: 12px; }
  #hd .hd-compare-mark-container { margin-top: 12px; }
  #hd .hd-compare-mark-container .hd-mark { padding-left: 14px; padding-right: 18px; font-size: 1.25em; }
  #hd .hd-tablist:before, #hd .hd-tablist:after { width: 12px; height: 28px; }
  #hd .hd-tablist button { min-width: 16em; }
  #hd .hd-tablist button span { font-size: 1.5em; }
  #hd .swiper-panel .swiper-slide { padding: 3% 5%; }
  #hd .swiper-panel .swiper-slide [role="tabpanel"] { width: 90%; } }
@media screen and (max-width: 768px) { #hd .hd-tablist-scroller { width: 110%; margin-left: -5%; }
  #hd .hd-tablist:before, #hd .hd-tablist:after { display: none; }
  #hd .hd-tablist button { min-width: 0; padding: 0 2%; }
  #hd .hd-tablist button span { padding-block: 10px; font-size: 1.5em; }
  #hd .swiper-panel .swiper-slide { padding-block: 8%; }
  #hd .swiper-panel .swiper-slide > .deco-dots { width: 4%; }
  #hd .swiper-panel .swiper-slide [role="tabpanel"] { width: 100%; }
  #hd .hd-dot-frame .frame-pos .frame-content { padding: 6px 12px; }
  #hd .hd-dot-frame .frame-pos p { font-size: 0.875em; line-height: 1.25; } }
@media screen and (max-width: 620px) { #hd .hd-tablist { justify-content: flex-start; }
  #hd .hd-tablist button:first-child { margin-left: auto; }
  #hd .hd-tablist button:last-child { margin-right: auto; }
  #hd .swiper-panel .swiper-slide { padding-block: 8%; }
  #hd .swiper-panel .swiper-slide > .deco-dots { width: 4%; margin-top: 2%; }
  #hd .swiper-panel .swiper-slide .hd-txt { width: 100%; margin-bottom: 5%; } }
@media screen and (max-width: 480px) { #hd .list-feature .h2 { font-size: 1.75em; }
  #hd .frame-border { padding: 8px; }
  #hd .hd-compare-mark-container { margin-top: 8px; }
  #hd .hd-compare-mark-container .hd-mark { padding: 5px 8px 2px 10px; font-size: .9em; letter-spacing: 0; } }
#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: white 40%; }
#hd .hd-nav ul li:nth-child(1) .hd-tooltip { color: white 40%; }
#hd .hd-nav ul li:nth-child(2) a span { background: #ff9e1b 40%; }
#hd .hd-nav ul li:nth-child(2) .hd-tooltip { color: #ff9e1b 40%; }
#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 #ff9e1b; 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: #ff9e1b; -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: #ff9e1b; }
#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 video { display: block; }
#hd .vid-control { width: 44px; height: 44px; margin: 10px; 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 > img { width: 80%; position: absolute; inset: 0; margin: auto; }
#hd .vid-control .play { display: none; }
#hd .vid-control.hd-active .play { display: block; }
#hd .vid-control.hd-active .pause { display: none; }

#hd .sec-kv { font-size: 1.25em; background: black; position: relative; z-index: 2; }
#hd .sec-kv figure { position: relative; overflow: hidden; }
#hd .sec-kv figure h2 { font-size: 5.5vw; width: 100%; position: absolute; top: 31%; left: 0; right: 0; z-index: 2; }
#hd .sec-kv figure span { display: block; white-space: nowrap; position: absolute; top: 0; }
#hd .sec-kv figure span.font-tuf { font-size: 0.24em; letter-spacing: .18em; }
#hd .sec-kv figure span.hd-left { width: 23%; right: 68%; opacity: 0; }
#hd .sec-kv figure span.hd-right { width: 23%; left: 68%; opacity: 0; }
#hd .sec-kv figure span img { display: inline-block; vertical-align: middle; width: auto; max-width: none !important; height: .7em; margin-right: 0.5em; margin-top: -0.125em; }
#hd .sec-kv figure strong { display: block; width: 100%; font-size: 0.875em; position: absolute; top: 0; margin-top: .6em; }
#hd .sec-kv figure strong .hd-left { letter-spacing: .28em; }
#hd .sec-kv figure strong .hd-right { letter-spacing: .18em; }
#hd .sec-kv figure.is-animated .hd-left { -webkit-animation-delay: 0.25s; -webkit-animation-duration: 1s; -webkit-animation-name: fadeInRight; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.25s; -moz-animation-duration: 1s; -moz-animation-name: fadeInRight; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0.25s; -o-animation-duration: 1s; -o-animation-name: fadeInRight; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0.25s; animation-duration: 1s; animation-name: fadeInRight; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-kv figure.is-animated .hd-right { -webkit-animation-delay: 0.25s; -webkit-animation-duration: 1s; -webkit-animation-name: fadeInLeft; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.25s; -moz-animation-duration: 1s; -moz-animation-name: fadeInLeft; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0.25s; -o-animation-duration: 1s; -o-animation-name: fadeInLeft; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0.25s; animation-duration: 1s; animation-name: fadeInLeft; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#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 #ff9e1b; 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 #ff9e1b; 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; } }
@media screen and (max-width: 1024px) { #hd .sec-kv { font-size: 1em; }
  #hd .sec-kv figure .hd-bg { width: 130%; max-width: none !important; margin-left: -15%; }
  #hd .sec-kv figure span.hd-left { width: 23%; right: 72%; }
  #hd .sec-kv figure span.hd-right { width: 23%; left: 72%; }
  #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 { margin-bottom: 5%; }
  #hd .sec-kv figure .hd-bg { width: 160%; margin-left: -30%; margin-bottom: -7%; }
  #hd .sec-kv figure h2 { font-size: 2em; position: relative; text-align: center; }
  #hd .sec-kv figure h2 span { display: inline; position: relative; white-space: unset; inset: 0 !important; }
  #hd .sec-kv figure h2 span.font-tuf { font-size: 0.75em; letter-spacing: .02em; }
  #hd .sec-kv figure h2 strong { font-size: 2em; position: relative; inset: 0; margin-top: 0; }
  #hd .sec-kv figure h2 strong span { letter-spacing: .04em !important; }
  #hd .sec-kv figure h2 .hd-right img { display: none; }
  #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 figure h2 { font-size: 1.5em; }
  #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 h2 { font-size: 1.25em; }
  #hd .sec-kv figure h2 strong { font-size: 1.875em; }
  #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-ksp { padding: 6% 0; position: relative; overflow: hidden; }
#hd .sec-ksp img { margin: 0 auto; }
#hd .sec-ksp .list-ksp { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-column-gap: 20px; grid-row-gap: 20px; }
#hd .sec-ksp .list-ksp > li:nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
#hd .sec-ksp .list-ksp > li:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
#hd .sec-ksp .list-ksp > li:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
#hd .sec-ksp .list-ksp > li:nth-child(4) { grid-area: 2 / 3 / 3 / 4; }
#hd .sec-ksp .list-ksp > li:nth-child(5) { grid-area: 3 / 1 / 4 / 2; }
#hd .sec-ksp .list-ksp > li:nth-child(6) { grid-area: 3 / 2 / 4 / 3; }
#hd .sec-ksp .list-ksp > li:nth-child(7) { grid-area: 3 / 3 / 4 / 4; }
#hd .sec-ksp .list-ksp > li:nth-child(1) .hd-content { padding-block: 2% 2.5%; }
#hd .sec-ksp .list-ksp > li:nth-child(1) ul { align-content: center; }
#hd .sec-ksp .list-ksp > li:nth-child(1) li { width: 33.3333%; position: relative; }
#hd .sec-ksp .list-ksp > li:nth-child(1) li:after { content: ''; display: block; width: 2px; height: 80%; background: white; opacity: 0.5; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; }
#hd .sec-ksp .list-ksp > li:nth-child(1) li:first-child { display: flex; }
#hd .sec-ksp .list-ksp > li:nth-child(1) li:first-child img { width: 8em; margin: auto; }
#hd .sec-ksp .list-ksp > li:nth-child(1) li:last-child:after { display: none; }
#hd .sec-ksp .list-ksp > li:nth-child(1) strong { font-size: 5em; margin-bottom: -0.25em; }
#hd .sec-ksp .list-ksp > li:nth-child(2) { width: 95%; }
#hd .sec-ksp .list-ksp > li:nth-child(2) .hd-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#hd .sec-ksp .list-ksp > li:nth-child(2) .hd-content { padding: 5%; margin: auto 0; }
#hd .sec-ksp .list-ksp > li:nth-child(2) li:first-child { margin-bottom: 20%; }
#hd .sec-ksp .list-ksp > li:nth-child(2) li:first-child img { width: 50%; }
#hd .sec-ksp .list-ksp > li:nth-child(2) li:nth-child(2) { position: relative; }
#hd .sec-ksp .list-ksp > li:nth-child(2) li:nth-child(2):after { content: ''; display: block; width: 2px; height: 80%; background: white; opacity: 0.5; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; }
#hd .sec-ksp .list-ksp > li:nth-child(2) li img { width: 60%; }
#hd .sec-ksp .list-ksp > li:nth-child(3) { width: 110%; margin-left: -5%; display: flex; align-items: center; justify-content: center; }
#hd .sec-ksp .list-ksp > li:nth-child(3) .hd-img-container { padding: 10% 0 4%; position: relative; z-index: 2; }
#hd .sec-ksp .list-ksp > li:nth-child(3) .hd-img-container .deco-pd { width: 105%; max-width: none !important; max-height: none !important; position: absolute; inset: 0; margin: -2.5%; z-index: -1; }
#hd .sec-ksp .list-ksp > li:nth-child(3) .hd-img-container .hd-pd { width: 70%; margin: 0 auto; }
#hd .sec-ksp .list-ksp > li:nth-child(4) { width: 95%; margin-left: 5%; }
#hd .sec-ksp .list-ksp > li:nth-child(4) .hd-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#hd .sec-ksp .list-ksp > li:nth-child(4) .hd-content { padding: 5%; margin: auto 0; }
#hd .sec-ksp .list-ksp > li:nth-child(4) h4 { margin-bottom: .5em; }
#hd .sec-ksp .list-ksp > li:nth-child(4) li { padding-left: 1em; margin-bottom: 0.3em; position: relative; }
#hd .sec-ksp .list-ksp > li:nth-child(4) li:before { content: ''; display: block; width: 0.5em; height: 0.5em; background: url(../img/ksp/bullet-primary.svg) center no-repeat; background-size: contain; position: absolute; top: .25em; left: 0; }
#hd .sec-ksp .list-ksp > li:nth-child(4) .hd-deco { width: 11%; position: absolute; bottom: 0; right: 0; margin: 5%; }
#hd .sec-ksp .list-ksp > li:nth-child(5) { width: 110%; }
#hd .sec-ksp .list-ksp > li:nth-child(5) .hd-content { padding: 4%; }
#hd .sec-ksp .list-ksp > li:nth-child(5) li { font-size: 1.125em; margin-bottom: 0.5em; }
#hd .sec-ksp .list-ksp > li:nth-child(5) .hd-icon img { width: 1.5em; margin-left: 0; margin-right: .4em; }
#hd .sec-ksp .list-ksp > li:nth-child(5) img { max-width: 80% !important; }
#hd .sec-ksp .list-ksp > li:nth-child(6) { width: 80%; margin-left: 10%; }
#hd .sec-ksp .list-ksp > li:nth-child(6) .hd-content { width: 100%; padding: 4% 8%; }
#hd .sec-ksp .list-ksp > li:nth-child(6) .hd-deco { width: 25%; position: absolute; top: 0; left: 0; margin: 8%; }
#hd .sec-ksp .list-ksp > li:nth-child(6) .hd-frame { display: flex; align-items: center; justify-content: center; }
#hd .sec-ksp .list-ksp > li:nth-child(6) ul { width: 100%; }
#hd .sec-ksp .list-ksp > li:nth-child(6) img { width: 4.5em; margin-bottom: 0.75em; }
#hd .sec-ksp .list-ksp > li:nth-child(7) { width: 110%; margin-left: -10%; }
#hd .sec-ksp .list-ksp > li:nth-child(7) .hd-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#hd .sec-ksp .list-ksp > li:nth-child(7) .hd-content { padding: 4%; margin: auto 0; }
#hd .sec-ksp .list-ksp > li:nth-child(7) .hd-icon img { width: 4em; margin-bottom: 0.75em; }
#hd .sec-ksp .list-ksp > li:nth-child(7) .h3 { padding-left: 5%; }
#hd .sec-ksp .list-ksp > li:nth-child(7) .hd-deco { width: 25%; position: absolute; bottom: 0; right: 0; margin: 5%; }
#hd .sec-ksp .hd-frame { height: 100%; border-radius: var(--border-radius); border: 1px solid #ff9e1b; box-sizing: border-box; position: relative; z-index: 2; }
#hd .sec-ksp .hd-frame .hd-bg { width: 100%; height: 100%; position: absolute; inset: 0; z-index: -1; object-fit: cover; pointer-events: none; user-select: none; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); }
#hd .sec-ksp .h3, #hd .sec-ksp .h4 { text-transform: none; letter-spacing: .018em; margin-bottom: 0; }
#hd .sec-ksp .h3 { font-size: 2.125em; }
#hd .sec-ksp .h4 { font-size: 1.3em; }
#hd .sec-ksp h3 { width: 100%; background: #ff9e1b; color: black !important; text-align: center; font-weight: bold; padding-top: 0.25em; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); margin-top: -1px; margin-bottom: 0; position: relative; }

@media screen and (max-width: 1440px) { #hd .sec-ksp .list-ksp > li:nth-child(4) li { font-size: 1.5em; }
  #hd .sec-ksp h3 { letter-spacing: .1em; } }
@media screen and (max-width: 1280px) { #hd .sec-ksp .list-ksp { grid-column-gap: 16px; grid-row-gap: 16px; }
  #hd .sec-ksp .h3 { font-size: 1.875em; }
  #hd .sec-ksp .h4 { font-size: 1.125em; } }
@media screen and (max-width: 1023px) { #hd .sec-ksp .list-ksp > li:nth-child(1) li:after { width: 1px; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) strong { font-size: 4em; }
  #hd .sec-ksp .list-ksp > li:nth-child(2) li:nth-child(2):after { width: 1px; }
  #hd .sec-ksp .list-ksp > li:nth-child(4) li { font-size: 1.25em; }
  #hd .sec-ksp .list-ksp > li:nth-child(6) img { width: 3em; }
  #hd .sec-ksp h3 { letter-spacing: .26em; }
  #hd .sec-ksp .h3 { font-size: 1.5em; }
  #hd .sec-ksp .h4 { font-size: 1em; } }
@media screen and (max-width: 768px) { #hd .sec-ksp { padding: 10% 0; }
  #hd .sec-ksp .list-ksp { grid-column-gap: 10px; grid-row-gap: 10px; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) strong { font-size: 3.5em; }
  #hd .sec-ksp .list-ksp > li:nth-child(4) li { font-size: 1em; }
  #hd .sec-ksp .list-ksp > li:nth-child(4) h4 { font-size: 1.5em; }
  #hd .sec-ksp h3 { letter-spacing: .04em; }
  #hd .sec-ksp .h3 { font-size: 1.3em; }
  #hd .sec-ksp .h4 { font-size: .75em; } }
@media screen and (max-width: 620px) { #hd .sec-ksp .list-ksp { display: block; max-width: 420px; margin: 0 auto; }
  #hd .sec-ksp .list-ksp > li:nth-child(n) { width: 100%; margin: 0 0 10px; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) li:first-child img { width: 6em; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) strong { font-size: 3em; }
  #hd .sec-ksp .list-ksp > li:nth-child(2) li:first-child { margin-bottom: 8%; }
  #hd .sec-ksp .list-ksp > li:nth-child(2) .h3 { font-size: 1.875em; }
  #hd .sec-ksp .list-ksp > li:nth-child(4) h4 { font-size: 2em; }
  #hd .sec-ksp .list-ksp > li:nth-child(4) li { font-size: 1.4em; }
  #hd .sec-ksp .list-ksp > li:nth-child(6) .hd-content { padding-block: 10% 6%; }
  #hd .sec-ksp .list-ksp > li:nth-child(6) img { width: 5em; }
  #hd .sec-ksp .list-ksp > li:nth-child(6) .hd-deco { width: 20%; margin: 3% 5%; }
  #hd .sec-ksp h3:before { display: block; }
  #hd .sec-ksp .h3 { font-size: 1.5em; }
  #hd .sec-ksp .h4 { font-size: 1em; } }
@media screen and (max-width: 480px) { #hd .sec-ksp { padding: 15% 0; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) ul { flex-direction: column; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) li { width: 100%; padding: 5% 0; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) li:after { width: 50%; height: 1px; left: 0; right: 0; top: auto; bottom: 0; margin: 0 auto; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) li:first-child img { width: 8em; } }
#hd .sec-video { position: relative; overflow: hidden; margin-bottom: -1px; }
#hd .sec-video .hd-container { position: relative; }
#hd .sec-video .vid-control { width: 44px; height: 44px; right: 5%; bottom: 3em; }
#hd .sec-video .btn-container { display: flex; justify-content: center; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto 2em; z-index: 2; }
#hd .sec-video .vid-container { width: 100%; padding-bottom: 50%; position: relative; overflow: hidden; }
#hd .sec-video .vid-container video, #hd .sec-video .vid-container .vid-cover { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
#hd .sec-video .vid-container video img, #hd .sec-video .vid-container .vid-cover img { width: 100%; }
#hd .sec-video .vid-cover { cursor: pointer; z-index: 2; }
#hd .sec-video .vid-cover:hover .hd-play img:first-child, #hd .sec-video .vid-cover:focus-visible .hd-play img:first-child { -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); }
#hd .sec-video .vid-cover:hover .hd-play img:last-child, #hd .sec-video .vid-cover:focus-visible .hd-play img:last-child { -moz-transform: scale(1.05, 1.05); -o-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
#hd .sec-video .vid-cover:focus-visible { box-shadow: 0 0 0 2px #ea931d inset; }
#hd .sec-video .vid-cover:active .hd-play img:first-child { -moz-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); -webkit-transform: rotate(60deg); transform: rotate(60deg); }
#hd .sec-video .vid-cover:active .hd-play img:last-child { -moz-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
#hd .sec-video .hd-play { width: 6%; height: 0; padding-bottom: 6%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-video .hd-play img { width: 100%; -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-video .hd-play img:last-child { position: absolute; top: 0; left: 0; }

@media screen and (max-width: 620px) { #hd .sec-video .vid-control { left: auto; right: 0; bottom: 0; }
  #hd .sec-video .btn-container { position: relative; margin: 20px auto; } }
@media screen and (max-width: 480px) { #hd .sec-video .vid-container { padding-bottom: 56.25%; }
  #hd .sec-video .hd-play { width: 18%; padding-bottom: 18%; } }
#hd .sec-ips { padding: 8% 0 6%; position: relative; z-index: 2; }
#hd .sec-ips .hd-bg { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center 60%; inset: 0; top: 10%; z-index: -1; pointer-events: none; user-select: none; }
#hd .sec-ips .deco-fan { width: 3.5%; position: absolute; top: 0; left: 0; margin-top: 5%; margin-left: 5%; }
#hd .sec-ips .list-feature > li:first-child img { width: 3.25em; }
#hd .sec-ips .vid-container { position: relative; }
#hd .sec-ips .vid-container .vid-pos { width: 52.25%; height: 0; padding-bottom: 56.25%; position: absolute; top: -5.86%; left: -.2%; right: 0; margin: auto; }
#hd .sec-ips .vid-container video { width: 100%; height: 100%; position: absolute; inset: 0; z-index: 2; }
#hd .sec-refresh { padding: 6% 0 8%; position: relative; overflow: hidden; z-index: 3; }
#hd .sec-refresh .deco-left { width: 3%; position: absolute; top: 17%; left: 0; margin-left: 6%; }

@media screen and (max-width: 1440px) { #hd .sec-refresh .deco-left { margin-left: 4%; } }
@media screen and (max-width: 1023px) { #hd .sec-refresh .deco-left { display: none; } }
@media screen and (max-width: 768px) { #hd .sec-ips { padding: 12% 0 8%; }
  #hd .sec-ips .deco-fan { width: 6%; }
  #hd .sec-refresh { padding: 8% 0 12%; } }
@media screen and (max-width: 480px) { #hd .sec-ips { padding: 16% 0 12%; }
  #hd .sec-ips .deco-fan { width: 9%; }
  #hd .sec-refresh { padding: 12% 0 16%; } }
#hd .sec-fluidity { padding: 6% 0; position: relative; overflow: hidden; }
#hd .sec-fluidity .list-feature > li:first-child img { width: 3.25em; }
#hd .sec-fluidity .list-feature > li:nth-child(2) img { width: 2.25em; }
#hd .sec-fluidity .list-feature > li:nth-child(3) { font-size: 0.875em; }

@media screen and (max-width: 768px) { #hd .sec-fluidity { padding: 12% 0; } }
@media screen and (max-width: 480px) { #hd .sec-fluidity { padding: 16% 0; } }
#hd .tuf-wrapper { position: relative; }
#hd .tuf-wrapper .deco-tuf { width: 18%; position: absolute; bottom: 26%; left: 0; margin-left: 3%; }
#hd .sec-color { padding: 6% 0; position: relative; overflow: hidden; }
#hd .sec-color .hd-img-container { width: 52%; margin: -2% auto 0; position: relative; transform-origin: center top; }
#hd .sec-color .hd-img-container img { width: 100%; position: absolute; top: 0; left: 0; backface-visibility: hidden; }
#hd .sec-color .hd-img-container .hd-pd { position: relative; }
#hd .sec-color .hd-img-container .deco-left { width: 2.75%; left: auto; right: 130%; top: 2%; }
#hd .sec-color .list-feature > li:first-child { font-size: 0.75em; }
#hd .sec-color .list-feature > li:last-child img { width: 5em; }
#hd .sec-color .list-feature .hd-icon img { width: 1.5em; margin-right: 0.5em; margin-top: -0.125em; }
#hd .sec-color .deco-plus { width: 12%; position: absolute; bottom: 0; right: 0; margin: 2% 3.5%; }

@media screen and (max-width: 768px) { #hd .sec-color { padding: 12% 0; }
  #hd .sec-color .hd-img-container { width: 70%; } }
@media screen and (max-width: 480px) { #hd .sec-color { padding: 16% 0; }
  #hd .sec-color .list-feature > li:last-child img { width: 4.75em; }
  #hd .sec-color .list-feature .hd-icon img { width: 1.4em; margin-right: 0.25em; } }
#hd .sec-ai { padding: 6% 0; position: relative; background-color: rgba(255, 158, 27, 0); background-image: -moz-linear-gradient(0deg, rgba(255, 158, 27, 0) 80%, rgba(255, 158, 27, 0.2)); background-image: -webkit-linear-gradient(0deg, rgba(255, 158, 27, 0) 80%, rgba(255, 158, 27, 0.2)); background-image: linear-gradient(0deg, rgba(255, 158, 27, 0) 80%, rgba(255, 158, 27, 0.2)); }
#hd .sec-ai .ani-replay { position: absolute; border: 1px solid #ff9e1b; bottom: 0; right: 0; background-color: black; color: #ff9e1b; padding: .5em 1em; margin: 10px; border-radius: 2em; cursor: pointer; }
#hd .sec-ai .ani-replay:hover, #hd .sec-ai .ani-replay:focus-visible { background-color: #111; }
#hd .sec-ai .ani-replay .hd-icon { display: inline-block; vertical-align: top; width: 1.4em; margin-top: 0.125em; margin-bottom: -0.125em; }
#hd .sec-ai .ani-replay p { display: inline-block; }
#hd .sec-ai .ai-swiper .txt { padding-left: 4%; max-width: 34em; }
#hd .sec-ai .ai-swiper figure { position: relative; overflow: hidden; margin: 0; }
#hd .sec-ai .ai-swiper figure > img { position: relative; width: 100%; }
#hd .sec-ai .ai-swiper figure .hd-tag.right { right: 0; left: auto; }
#hd .sec-ai .ai-swiper figure .cover { position: absolute; width: 100%; top: 0; left: 0; }
#hd .sec-ai .ai-swiper figure .crosshair-bg { height: 100%; width: auto; max-width: none !important; }
#hd .sec-ai .ai-swiper.is-animated .swiper-slide-active .crosshair-cover-green { -webkit-animation-delay: 0.8s; -webkit-animation-duration: 1.5s; -webkit-animation-name: crosshair-cover-green; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 2; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.8s; -moz-animation-duration: 1.5s; -moz-animation-name: crosshair-cover-green; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 2; -moz-animation-fill-mode: both; -o-animation-delay: 0.8s; -o-animation-duration: 1.5s; -o-animation-name: crosshair-cover-green; -o-animation-timing-function: ease; -o-animation-iteration-count: 2; -o-animation-fill-mode: both; animation-delay: 0.8s; animation-duration: 1.5s; animation-name: crosshair-cover-green; animation-timing-function: ease; animation-iteration-count: 2; animation-fill-mode: both; }
#hd .sec-ai .ai-swiper.is-animated .swiper-slide-active .crosshair-cover-red { -webkit-animation-delay: 0.8s; -webkit-animation-duration: 1.5s; -webkit-animation-name: crosshair-cover-red; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 2; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.8s; -moz-animation-duration: 1.5s; -moz-animation-name: crosshair-cover-red; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 2; -moz-animation-fill-mode: both; -o-animation-delay: 0.8s; -o-animation-duration: 1.5s; -o-animation-name: crosshair-cover-red; -o-animation-timing-function: ease; -o-animation-iteration-count: 2; -o-animation-fill-mode: both; animation-delay: 0.8s; animation-duration: 1.5s; animation-name: crosshair-cover-red; animation-timing-function: ease; animation-iteration-count: 2; animation-fill-mode: both; }
#hd .sec-ai .ai-swiper.is-animated .swiper-slide-active .crosshair-bg { -webkit-animation-delay: 0.8s; -webkit-animation-duration: 1.5s; -webkit-animation-name: crosshair-bg; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 2; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.8s; -moz-animation-duration: 1.5s; -moz-animation-name: crosshair-bg; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 2; -moz-animation-fill-mode: both; -o-animation-delay: 0.8s; -o-animation-duration: 1.5s; -o-animation-name: crosshair-bg; -o-animation-timing-function: ease; -o-animation-iteration-count: 2; -o-animation-fill-mode: both; animation-delay: 0.8s; animation-duration: 1.5s; animation-name: crosshair-bg; animation-timing-function: ease; animation-iteration-count: 2; animation-fill-mode: both; }
#hd .sec-ai .ai-swiper.is-animated .swiper-slide-active .boost-cover-2 { opacity: 0; -webkit-animation-delay: 0.8s; -webkit-animation-duration: 4s; -webkit-animation-name: boost-cover-2; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.8s; -moz-animation-duration: 4s; -moz-animation-name: boost-cover-2; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0.8s; -o-animation-duration: 4s; -o-animation-name: boost-cover-2; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0.8s; animation-duration: 4s; animation-name: boost-cover-2; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-ai .ai-swiper.is-animated .swiper-slide-active .boost-cover-3 { opacity: 0; -webkit-animation-delay: 0.8s; -webkit-animation-duration: 4s; -webkit-animation-name: boost-cover-3; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.8s; -moz-animation-duration: 4s; -moz-animation-name: boost-cover-3; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0.8s; -o-animation-duration: 4s; -o-animation-name: boost-cover-3; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0.8s; animation-duration: 4s; animation-name: boost-cover-3; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-ai .ai-swiper.is-animated .swiper-slide-active .boost-cover-4 { opacity: 0; -webkit-animation-delay: 0.8s; -webkit-animation-duration: 4s; -webkit-animation-name: boost-cover-4; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.8s; -moz-animation-duration: 4s; -moz-animation-name: boost-cover-4; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0.8s; -o-animation-duration: 4s; -o-animation-name: boost-cover-4; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0.8s; animation-duration: 4s; animation-name: boost-cover-4; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }

@media screen and (max-width: 1024px) { #hd .sec-ai .ai-swiper .txt { width: 100%; padding-left: 0; margin-bottom: 3%; max-width: 600px; }
  #hd .sec-ai .ai-swiper figure { width: 100%; max-width: 600px; } }
@media screen and (max-width: 480px) { #hd .sec-ai .ai-swiper figure .hd-tag { max-width: 40%; }
  #hd .sec-ai .ai-swiper figure .hd-tag strong, #hd .sec-ai .ai-swiper figure .hd-tag span { display: inline; line-height: 1.1; } }
#hd .sec-control { padding: 6% 0; position: relative; overflow: hidden; }
#hd .sec-control .deco-hr { width: 39%; margin: 0 13% 0 auto; position: absolute; top: 0; left: 0; right: 0; }
#hd .sec-control .swiper-slide .hd-txt { max-width: 50em; }
#hd .sec-control .filter-trigger { margin: 1.5em auto 0; }
#hd .sec-control .filter-trigger button { cursor: pointer; }
#hd .sec-control .filter-trigger button .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-control .filter-trigger button:hover .h5, #hd .sec-control .filter-trigger button:focus-visible .h5 { opacity: .9; }
#hd .sec-control .filter-trigger button[aria-selected="true"] .hd-icon { background-position: 100% 0; }
#hd .sec-control .filter-trigger button[aria-selected="true"] .h5 { opacity: 1; }
#hd .sec-control .slide-displaywidget { margin-bottom: 0.25em; }
#hd .sec-control .slide-displaywidget [role="tabpanel"] { width: 100%; max-width: none; }
#hd .sec-control .slide-displaywidget .hd-img-container { margin: 0 auto 20px; }
#hd .sec-control .slide-displaywidget .hd-img-container img { width: 100%; }
#hd .sec-control .slide-displaywidget .hd-img-container figure { position: relative; }
#hd .sec-control .slide-displaywidget .hd-img-container figure .hd-pos { display: flex; align-items: center; justify-content: center; width: 12em; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 5%; }
#hd .sec-control .slide-displaywidget .hd-img-container figure .h2 { display: flex; align-items: center; justify-content: center; font-size: 2.5em; text-transform: none; text-align: center; max-width: 4em; position: absolute; inset: 0; margin: auto; padding-bottom: 0.4em; }
#hd .sec-control .slide-displaywidget .hd-button-container { max-width: 36em; margin: 20px auto; }
#hd .sec-control .slide-displaywidget .hd-button-container button { font-family: "FFDINCondensedBold", "DINCondensed", "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: 1.5em; min-width: 40%; padding: .4em .75em .125em; margin: 5px; position: relative; color: white; background: #ff9e1b; clip-path: polygon(100% 0, 100% calc(100% - .4em), calc(100% - .4em) 100%, 0 100%, 0 0); z-index: 2; cursor: pointer; }
#hd .sec-control .slide-displaywidget .hd-button-container button:before { content: ''; display: block; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; inset: 0; margin: auto; background: #181818; clip-path: polygon(100% 0, 100% calc(100% - .4em), calc(100% - .4em) 100%, 0 100%, 0 0); z-index: -1; }
#hd .sec-control .slide-displaywidget .hd-button-container button[aria-expanded="true"] { color: black; pointer-events: none; cursor: default; }
#hd .sec-control .slide-displaywidget .hd-button-container button[aria-expanded="true"]:before { background: #ff9e1b; }
#hd .sec-control .slide-displaywidget .hd-txt { width: 100%; padding-left: 5px; }
#hd .sec-control .slide-displaywidget .hd-txt-container > * { display: none; }
#hd .sec-control .slide-displaywidget .hd-txt-container > *[aria-current="true"] { display: block; }
#hd .sec-control .slide-displaywidget .list-bullet { width: 130%; display: flex; align-items: flex-start; justify-content: center; margin: 20px -15% 0; text-align: left; }
#hd .sec-control .slide-displaywidget .list-bullet > li { font-size: 1.25em; font-weight: 500; letter-spacing: .018em; padding-left: 1.5em; padding-right: 1em; margin-bottom: 1em; position: relative; }
#hd .sec-control .slide-displaywidget .list-bullet > li:before { content: ''; display: block; width: 1em; height: 1em; background: url(../img/control/bullet.svg) center no-repeat; background-size: contain; position: absolute; top: .125em; left: 0; }
#hd .sec-control .slide-displaywidget .vid-container { position: relative; }
#hd .sec-control .slide-displaywidget .vid-control img { width: 80%; }
#hd .sec-control .slide-gamevisual [role="tabpanel"] { width: 100%; max-width: none; }
#hd .sec-control .slide-gamevisual .filter-trigger { margin-bottom: 2em; }
#hd .sec-control .slide-gamevisual .filter-trigger .h5 { display: flex; align-items: center; min-height: 44px; font-size: 1.25em; padding: .5em .5em .25em; margin-right: .5em; line-height: 1; color: white !important; position: relative; z-index: 2; }
#hd .sec-control .slide-gamevisual .filter-trigger .hd-active .h5 { color: black !important; }
#hd .sec-control .slide-gamevisual .filter-trigger .hd-active .h5:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255, 158, 27, 0.95); clip-path: polygon(100% 0, 100% calc(100% - .2em), calc(100% - .2em) 100%, 0 100%, 0 0); z-index: -1; }
#hd .sec-control .slide-gamevisual .panel-container > [role="tabpanel"] { display: none; }
#hd .sec-control .slide-gamevisual .panel-container > [role="tabpanel"][aria-current="true"] { display: block; }
#hd .sec-control .slide-gamevisual .panel-container img { width: 100%; }
#hd .sec-control .slide-gamevisual .target-txt { margin-top: 1.5em; opacity: 0.75; }
#hd .sec-control .slide-gameplus .hd-img { display: flex; flex-direction: column-reverse; width: 100%; margin-bottom: 20px; }
#hd .sec-control .slide-gameplus .frame-content > img { width: 100%; }
#hd .sec-control .slide-gameplus .filter-trigger { width: 90%; }
#hd .sec-control .slide-gameplus .filter-target { width: 100%; height: 0; }
#hd .sec-control .slide-gameplus .filter-target > div { opacity: 0; -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
#hd .sec-control .slide-gameplus .filter-target > div img { width: 100%; position: absolute; top: 0; left: 0; }
#hd .sec-control .slide-gameplus .filter-target > div.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 .sec-control .slide-gameplus .hd-icon { width: 80px; height: 80px; margin: 0 auto; background-position: 0 0; background-size: 200%; }
#hd .sec-control .slide-gameplus .hd-icon.icon-sniper { background-image: url(../img/gameplus/ic_sniper.png); }
#hd .sec-control .slide-gameplus .hd-icon.icon-crosshair { background-image: url(../img/gameplus/ic_crosshair.png); }
#hd .sec-control .slide-gameplus .hd-icon.icon-timer { background-image: url(../img/gameplus/ic_timer.png); }
#hd .sec-control .slide-gameplus .hd-icon.icon-fps { background-image: url(../img/gameplus/ic_fps.png); }
#hd .sec-control .slide-gameplus .hd-icon.icon-display { background-image: url(../img/gameplus/ic_display-alignment.png); }
#hd .sec-control .slide-gameplus .h5 { font-family: "Roboto", "Microsoft Jhenghei", "Microsoft YaHei", "Segoe UI", "Arial", sans-serif; font-size: .9em; color: white; letter-spacing: 0; margin-top: .5em; }

@media screen and (max-width: 1440px) { #hd .sec-control .slide-gameplus .hd-img { padding-right: 0; } }
@media screen and (max-width: 1024px) { #hd .sec-control .slide-displaywidget .list-bullet > li { font-size: 1.125em; }
  #hd .sec-control .slide-gameplus .hd-icon { width: 80px; height: 80px; } }
@media screen and (max-width: 1023px) { #hd .sec-control .slide-displaywidget .list-bullet { width: 100%; flex-direction: column; justify-content: center; max-width: 20em; margin: 20px auto 0; }
  #hd .sec-control .slide-displaywidget .list-bullet > li { padding-right: 0; } }
@media screen and (max-width: 768px) { #hd .sec-control { padding: 12% 0; }
  #hd .sec-control .slide-gameplus .filter-trigger { width: 100%; }
  #hd .sec-control .slide-gameplus .filter-trigger button .h5 { font-size: .75em; }
  #hd .sec-control .slide-gamevisual .hd-content .h5 { font-size: 1.125em; }
  #hd .sec-control .slide-gamevisual .frame-pos { margin: .75em; } }
@media screen and (max-width: 620px) { #hd .sec-control .slide-displaywidget .hd-content { width: 100%; }
  #hd .sec-control .slide-displaywidget .hd-button-container button { font-size: 1.25em; padding-block: .5em .3em; margin: 3px; }
  #hd .sec-control .slide-displaywidget .hd-img-container figure .hd-pos { font-size: 1.25em; position: relative; left: 0; right: 0; margin: 20px auto 0; }
  #hd .sec-control .slide-gameplus .hd-icon { width: 60px; height: 60px; }
  #hd .sec-control .slide-gameplus .filter-trigger { width: 110%; margin-left: -5%; }
  #hd .sec-control .slide-gameplus .filter-trigger button .h5 { font-size: .6em; }
  #hd .sec-control .slide-gameplus .hd-dot-frame { border-bottom-width: 1px; }
  #hd .sec-control .slide-gamevisual .filter-trigger button { margin-right: 0; }
  #hd .sec-control .slide-gamevisual .filter-trigger .h5 { font-size: 1.125em; }
  #hd .sec-control .slide-gamevisual .hd-dot-frame > .frame-content { position: relative; overflow: hidden; }
  #hd .sec-control .slide-gamevisual .hd-dot-frame > .frame-content img { margin: -6% 0; } }
@media screen and (max-width: 480px) { #hd .sec-control { padding: 16% 0; }
  #hd .sec-control .slide-displaywidget .hd-img-container figure .hd-pos { font-size: 1em; }
  #hd .sec-control .slide-displaywidget .list-bullet > li { font-size: 1em; }
  #hd .sec-control .slide-gameplus .filter-trigger { justify-content: center; }
  #hd .sec-control .slide-gameplus .filter-trigger button { width: 33.3333%; margin-bottom: 10px; } }
#hd .sec-design { padding: 6% 0; position: relative; }
#hd .sec-design .deco-slash { width: 13%; position: absolute; top: 0; left: 0; margin-top: 5%; margin-left: -2%; }
#hd #pageContent-tabpanel-connectivity { width: 90%; max-width: none; }
#hd #pageContent-tabpanel-ergonomic { width: 90%; max-width: none; }
#hd #pageContent-tabpanel-ergonomic .hd-img { width: 120%; margin-left: -10%; }
#hd #pageContent-tabpanel-ergonomic .list-ergo { margin-top: 8%; }
#hd #pageContent-tabpanel-ergonomic .hd-mark { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
#hd #pageContent-tabpanel-ergonomic .hd-mark .hd-icon { flex-shrink: 0; width: 56px; margin-right: 10px; }
#hd #pageContent-tabpanel-ergonomic .hd-mark p { font-size: 1em; line-height: 1.125; }

@media screen and (max-width: 1024px) { #hd #pageContent-tabpanel-ergonomic .hd-mark .hd-icon { width: 40px; }
  #hd #pageContent-tabpanel-ergonomic .hd-mark p { font-size: 0.75em; } }
@media screen and (max-width: 768px) { #hd .sec-design { padding: 12% 0; }
  #hd .sec-design .deco-slash { width: 16%; }
  #hd #pageContent-tabpanel-ergonomic { width: 100%; }
  #hd #pageContent-tabpanel-ergonomic .hd-img { width: 110%; margin-left: -5%; } }
@media screen and (max-width: 620px) { #hd #pageContent-tabpanel-ergonomic .list-ergo { flex-wrap: wrap; margin-top: 0; }
  #hd #pageContent-tabpanel-ergonomic .list-ergo > li { width: 50%; margin-bottom: 20px; }
  #hd #pageContent-tabpanel-ergonomic .list-ergo .hd-pd { width: 90%; max-width: 180px !important; margin: 0 auto -5%; } }
@media screen and (max-width: 480px) { #hd .sec-design { padding: 16% 0; }
  #hd .sec-design .deco-slash { width: 20%; }
  #hd #pageContent-tabpanel-connectivity { width: 100%; }
  #hd #pageContent-tabpanel-connectivity .hd-img { width: 110%; margin-left: -5%; }
  #hd #pageContent-tabpanel-ergonomic .hd-mark .hd-icon { width: 20px; } }
#hd .bg-share { position: relative; z-index: 2; }
#hd .bg-share > .hd-bg { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center; inset: 0; top: 0; z-index: -1; pointer-events: none; user-select: none; }
#hd .sec-eyecare { padding: 6% 0 15%; position: relative; }
#hd .sec-eyecare .deco-slash { width: 13%; position: absolute; top: 0; right: 0; margin-top: 5%; margin-right: -2%; }
#hd .sec-eyecare .hd-logo { width: 16em; margin-top: 10px; margin-inline: auto; }

@media screen and (max-width: 768px) { #hd .sec-eyecare { padding: 12% 0 20%; }
  #hd .sec-eyecare .deco-slash { width: 16%; } }
@media screen and (max-width: 620px) { #hd .sec-eyecare .hd-logo { width: 14em; margin: 10px auto 0; } }
@media screen and (max-width: 480px) { #hd .sec-eyecare { padding: 16% 0 25%; }
  #hd .sec-eyecare .deco-slash { width: 20%; } }
#pageContent-green-session { font-size: 16px; color: black; position: relative; z-index: 2; /* RESET */ /* FONT & COLOR */ /* GRID */ /* STYLE */ background: #e6e6e7; padding: 0 0 4em; }
#pageContent-green-session * { 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; }
#pageContent-green-session h1, #pageContent-green-session h2, #pageContent-green-session h3, #pageContent-green-session h4, #pageContent-green-session p, #pageContent-green-session a, #pageContent-green-session li { font: inherit; }
#pageContent-green-session img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0 auto; }
#pageContent-green-session h2, #pageContent-green-session .h2 { font-family: "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 2.25em; font-weight: bold; line-height: 1; color: #2c2c2c !important; letter-spacing: 0; margin-bottom: 1em; word-break: normal; word-wrap: normal; text-transform: none; }
#pageContent-green-session h2.color-primary, #pageContent-green-session .h2.color-primary { color: #00F5CA !important; }
#pageContent-green-session h3, #pageContent-green-session .h3 { font-family: "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.6875em; font-weight: bold; line-height: 1; letter-spacing: .018em; color: #2c2c2c; text-transform: none; margin-bottom: .5em; }
#pageContent-green-session p, #pageContent-green-session small, #pageContent-green-session a, #pageContent-green-session li { font-family: "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; }
#pageContent-green-session p { font-size: 1.125em; line-height: 1.5; letter-spacing: 0; font-weight: 300; }
#pageContent-green-session .color-primary { color: #00F5CA !important; }
#pageContent-green-session .color-secondary { color: #133ED4 !important; }
#pageContent-green-session .color-dark { color: #262626 !important; }
#pageContent-green-session .col20 { width: 20%; }
#pageContent-green-session .col25 { width: 25%; }
#pageContent-green-session .col33 { width: 33.3333%; }
#pageContent-green-session .col35 { width: 35%; }
#pageContent-green-session .col40 { width: 40%; }
#pageContent-green-session .col45 { width: 45%; }
#pageContent-green-session .col50 { width: 50%; }
#pageContent-green-session .col55 { width: 55%; }
#pageContent-green-session .col60 { width: 60%; }
#pageContent-green-session .col65 { width: 65%; }
#pageContent-green-session .col66 { width: 66.6666%; }
#pageContent-green-session .col75 { width: 75%; }
#pageContent-green-session .col100 { width: 100%; }
#pageContent-green-session .banner-container { background: #262626; margin-bottom: 3em; position: relative; overflow: hidden; }
#pageContent-green-session .banner-container .bg { width: 100%; margin: -2.5% 0; opacity: .75; }
#pageContent-green-session .banner-container .container { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#pageContent-green-session .banner-container .icon { width: 13em; margin: 5em 3em 3em; }
#pageContent-green-session .banner-container h2 { font-size: 5em; line-height: 1.25; letter-spacing: .024em; text-align: left; font-weight: bold; margin-bottom: 0; margin-right: 1em; }
#pageContent-green-session .banner-container .logo-asus { width: 8%; min-width: 6em; position: absolute; bottom: 0; right: 0; margin: 2.5% 4%; }
#pageContent-green-session .container { width: 80%; max-width: 62.5em; padding: 0; margin: 0 auto; }
#pageContent-green-session a { color: #133ED4; }
#pageContent-green-session a:hover, #pageContent-green-session a:focus-visible { color: black; }
#pageContent-green-session .frame { display: flex; flex-wrap: nowrap; align-items: center; width: 100%; padding: 0 5%; margin: 0 0 1.5em; background: white; border-radius: 1.5em; }
#pageContent-green-session .frame.frame-large { padding: 2em 5%; }
#pageContent-green-session .frame.frame-large .content { padding-right: 1em; }
#pageContent-green-session picture img { width: 100%; }
#pageContent-green-session .feature-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; grid-column-gap: 20px; margin-bottom: 20px; }
#pageContent-green-session .feature-container picture { width: 8em; padding: 2em 0; flex-shrink: 0; }
#pageContent-green-session .feature-container .frame { height: 100%; position: relative; overflow: hidden; }
#pageContent-green-session .feature-container .frame-bg:before { content: ''; display: block; }
#pageContent-green-session .feature-container .hd-bg { width: 50%; height: 100%; padding: 0; position: absolute; top: 0; right: 0; }
#pageContent-green-session .feature-container .hd-bg:after { content: ''; display: block; width: 50%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(255, 255, 255, 0); background-image: -moz-linear-gradient(270deg, rgba(255, 255, 255, 0), white 50%); background-image: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0), white 50%); background-image: linear-gradient(270deg, rgba(255, 255, 255, 0), white 50%); }
#pageContent-green-session .feature-container .hd-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 41% center; }
#pageContent-green-session .feature-container .content { padding: 2em 2em 2em 1.5em; position: relative; z-index: 2; }
#pageContent-green-session .feature-container .content p { font-size: 0.875em; line-height: 1.25; }
@media screen and (min-width: 2560px) { #pageContent-green-session { font-size: 20px; } }
@media screen and (min-width: 3000px) { #pageContent-green-session { font-size: 34px; } }
@media screen and (max-width: 1440px) { #pageContent-green-session .banner-container h2 { font-size: 4em; }
  #pageContent-green-session .banner-container .icon { width: 9em; }
  #pageContent-green-session .feature-container .content { padding: 1em 2em 1em 1em; } }
@media screen and (max-width: 1024px) { #pageContent-green-session .banner-container h2 { font-size: 3em; }
  #pageContent-green-session .banner-container .icon { width: 7em; }
  #pageContent-green-session .banner-container .logo-asus { margin: 1.25em 2em; }
  #pageContent-green-session .container { width: 90%; } }
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 768px) { #pageContent-green-session .banner-container .bg { margin: 0; }
  #pageContent-green-session .banner-container h2 { font-size: 2.25em; }
  #pageContent-green-session .banner-container .icon { width: 5em; margin: 0; }
  #pageContent-green-session .frame.frame-large { flex-direction: column; }
  #pageContent-green-session .frame.frame-large .content { width: 100%; margin-bottom: 2em; }
  #pageContent-green-session .frame.frame-large picture { width: 100%; }
  #pageContent-green-session .feature-container .frame { flex-direction: column; }
  #pageContent-green-session .feature-container .frame-bg { flex-direction: column; }
  #pageContent-green-session .feature-container .hd-bg { width: 120%; height: auto; margin: -15% -10% -10%; right: 0; position: relative; }
  #pageContent-green-session .feature-container .hd-bg:after { width: 100%; height: 0; padding-bottom: 20%; top: 0; left: 0; margin-top: -1px; background-color: rgba(255, 255, 255, 0); background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), white); background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), white); background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), white); }
  #pageContent-green-session .feature-container .content { width: 100%; } }
@media screen and (max-width: 768px) { #pageContent-green-session .feature-container { display: block; } }
@media screen and (max-width: 480px) { #pageContent-green-session .banner-container .bg { width: 240%; max-width: none !important; margin-left: -80%; }
  #pageContent-green-session .banner-container .container { flex-direction: column; align-items: flex-start; }
  #pageContent-green-session .banner-container h2 { font-size: 2em; }
  #pageContent-green-session .banner-container .icon { width: 4em; margin: 1em 0 0; }
  #pageContent-green-session h2, #pageContent-green-session .h2 { font-size: 1.75em; }
  #pageContent-green-session h3, #pageContent-green-session .h3 { font-size: 1.5em; }
  #pageContent-green-session .frame { padding: 1.5em 5%; border-radius: .75em; margin-bottom: .5em; }
  #pageContent-green-session .frame.frame-large { padding: 1.5em 5%; }
  #pageContent-green-session .frame.frame-large .content { padding-right: 0; }
  #pageContent-green-session .feature-container li .frame { flex-direction: column; }
  #pageContent-green-session .feature-container li .content { border: none; padding: 0 0 1em; }
  #pageContent-green-session .feature-container picture { width: 6em; padding: 0; margin: 0 auto; } }

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