@import url(../lib/swiper/swiper-bundle.min.css);
@import url("https://dlcdnimgs.asus.com/vendor/public/fonts/css/roboto.css");
.bg-dark { background: #131313; }

/*  Width and Height */
/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
html, body { padding: 0; margin: 0; }

#hd { font-family: "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; background: white; color: black; font-size: 16px; margin: 0; padding: 0; position: relative; /* ---------- 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: #131313; color: #b99770; }
#hd ::-moz-selection { background: #131313; color: #b99770; }
#hd ul, #hd li, #hd figure, #hd p { margin: 0; padding: 0; }
#hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; }
#hd img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0 auto; }
#hd img.lazyLoad { opacity: 0; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; height: 50vh; }
#hd img.lazyLoad.lazyLoaded { height: auto; opacity: 1; }
#hd button { border: none; outline: none; background: none; box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
#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 #b99770; }
#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 dotCounter { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-moz-keyframes dotCounter { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-ms-keyframes dotCounter { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-o-keyframes dotCounter { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@keyframes dotCounter { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-webkit-keyframes dotHint { 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-moz-keyframes dotHint { 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-ms-keyframes dotHint { 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-o-keyframes dotHint { 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@keyframes dotHint { 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-webkit-keyframes slideProgress { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-moz-keyframes slideProgress { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-ms-keyframes slideProgress { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-o-keyframes slideProgress { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@keyframes slideProgress { 0% { -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-moz-keyframes zoomIn { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-ms-keyframes zoomIn { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-o-keyframes zoomIn { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes zoomIn { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-webkit-keyframes zoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@-moz-keyframes zoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@-ms-keyframes zoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@-o-keyframes zoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@keyframes zoomOut { 0% { -webkit-transform: scale(1); transform: scale(1); }
  100% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-ms-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }
@-webkit-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-moz-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-ms-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-o-keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes fadeOut { 0% { opacity: 1; }
  100% { opacity: 0; } }
@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } }
#hd { font-size: 16px; }
#hd h1 { font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 4vw; line-height: 1.125; letter-spacing: 0; margin-bottom: .25em; }
#hd h2, #hd .h2 { font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 3.25em; font-weight: normal; line-height: 1.05; color: black !important; letter-spacing: -.026em; margin-bottom: .5em; word-break: normal; word-wrap: normal; }
#hd h2 sup, #hd .h2 sup { font-size: 0.5em; }
#hd h3, #hd .h3 { font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.875em; font-weight: normal; line-height: 1.125; letter-spacing: -.018em; color: black; margin-bottom: .65em; }
#hd h4, #hd .h4 { font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.5em; font-weight: normal; line-height: 1.25; letter-spacing: 0; margin-bottom: .35em; color: black; }
#hd h5, #hd .h5 { font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.125em; font-weight: normal; line-height: 1.25; letter-spacing: .018em; margin-bottom: .5em; }
#hd p, #hd small, #hd a, #hd li { font-family: "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; letter-spacing: 0; }
#hd p { font-size: 1.125em; line-height: 1.3; letter-spacing: 0; font-weight: 300; }
#hd b, #hd strong { font-weight: bold; }
#hd small { font-size: .875em; font-weight: 400; letter-spacing: .04em; }
#hd .hd-note small { font-size: .75em; display: block; }
#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; font-weight: 400; margin-top: .5em; color: black; }
#hd .hd-underline { text-decoration: underline; }
#hd a.txt-link:hover { color: #9f6a41; }
#hd .nobr { white-space: nowrap; }
#hd .color-primary { color: #b99770 !important; }
#hd .color-primary-light { color: #c8a780 !important; }
#hd .color-primary-dark { color: #9f6a41 !important; }
#hd .color-secondary { color: #c7d3fe !important; }
#hd .color-grey { color: #aaaaaa !important; }
#hd .color-light-grey { color: #d6d6d6 !important; }
#hd .color-dark-grey { color: #555555 !important; }
#hd .color-info { color: #2A77CF !important; }
#hd .color-white { color: white !important; }
#hd .color-gradient { display: inline-block; color: #b99770 !important; background-color: #dfc9a9; background-image: -moz-linear-gradient(180deg, #dfc9a9, #c79f6f 42%, #dfc9a9); background-image: -webkit-linear-gradient(180deg, #dfc9a9, #c79f6f 42%, #dfc9a9); background-image: linear-gradient(180deg, #dfc9a9, #c79f6f 42%, #dfc9a9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .color-gradient::selection, #hd .color-gradient ::selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient::-moz-selection, #hd .color-gradient ::-moz-selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-dark { display: inline-block; color: #b99770 !important; background-color: #a0724c; background-image: -moz-linear-gradient(180deg, #a0724c, #c2a087 42%, #a0724c); background-image: -webkit-linear-gradient(180deg, #a0724c, #c2a087 42%, #a0724c); background-image: linear-gradient(180deg, #a0724c, #c2a087 42%, #a0724c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .color-gradient-dark::selection, #hd .color-gradient-dark ::selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-dark::-moz-selection, #hd .color-gradient-dark ::-moz-selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-h { display: inline-block; color: #b99770 !important; background-color: #dfc9a9; background-image: -moz-linear-gradient(270deg, #dfc9a9, #c79f6f 42%, #dfc9a9); background-image: -webkit-linear-gradient(270deg, #dfc9a9, #c79f6f 42%, #dfc9a9); background-image: linear-gradient(270deg, #dfc9a9, #c79f6f 42%, #dfc9a9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .color-gradient-h::selection, #hd .color-gradient-h ::selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-h::-moz-selection, #hd .color-gradient-h ::-moz-selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-silver { display: inline-block; color: #b99770 !important; background-color: #ffffff; background-image: -moz-linear-gradient(180deg, #ffffff 20%, #cecece 35%, #a7a7a7 40%, #ffffff 75%); background-image: -webkit-linear-gradient(180deg, #ffffff 20%, #cecece 35%, #a7a7a7 40%, #ffffff 75%); background-image: linear-gradient(180deg, #ffffff 20%, #cecece 35%, #a7a7a7 40%, #ffffff 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .color-gradient-silver::selection, #hd .color-gradient-silver ::selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-silver::-moz-selection, #hd .color-gradient-silver ::-moz-selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-dark-h { display: inline-block; color: #b99770 !important; background-color: #dfcbaa; background-image: -moz-linear-gradient(90deg, #dfcbaa, #ad8d66); background-image: -webkit-linear-gradient(90deg, #dfcbaa, #ad8d66); background-image: linear-gradient(90deg, #dfcbaa, #ad8d66); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .color-gradient-dark-h::selection, #hd .color-gradient-dark-h ::selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .color-gradient-dark-h::-moz-selection, #hd .color-gradient-dark-h ::-moz-selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .hd-uppercase { text-transform: uppercase; }

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

@media screen and (min-width: 2560px) { #hd { font-size: 20px; } }
@media screen and (min-width: 3000px) { #hd { font-size: 32px; } }
@media screen and (max-width: 1440px) { #hd h1 { font-size: 3.75vw; }
  #hd h2, #hd .h2 { font-size: 3em; }
  #hd h3, #hd .h3 { font-size: 1.75em; } }
@media screen and (max-width: 1280px) { #hd h1 { font-size: 3.5vw; }
  #hd h2, #hd .h2 { font-size: 2.75em; }
  #hd h3, #hd .h3 { font-size: 2em; }
  #hd h4, #hd .h4 { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd h2, #hd .h2 { font-size: 2.5em; }
  #hd h3, #hd .h3 { font-size: 1.75em; }
  #hd p { font-size: 1em; } }
@media screen and (max-width: 768px) { #hd h2, #hd .h2 { font-size: 2em; }
  #hd h3, #hd .h3 { font-size: 1.5em; }
  #hd h4, #hd .h4 { font-size: 1.125em; }
  #hd h5, #hd .h5 { font-size: 1.125em; } }
@media screen and (max-width: 480px) { #hd h2, #hd .h2 { font-size: 1.75em; }
  #hd h3, #hd .h3 { font-size: 1.25em; } }
#hd .hd-w900, #hd .hd-w1000, #hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1400, #hd .hd-w1600 { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w900 { max-width: 900px; }
#hd .hd-w1000 { max-width: 1000px; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1300 { max-width: 1300px; }
#hd .hd-w1400 { max-width: 1400px; }
#hd .hd-w1600 { max-width: 1600px; }
#hd .hd-col20 { width: 20%; }
#hd .hd-col25 { width: 25%; }
#hd .hd-col33 { width: 33.3333%; }
#hd .hd-col35 { width: 35%; }
#hd .hd-col40 { width: 40%; }
#hd .hd-col45 { width: 45%; }
#hd .hd-col50 { width: 50%; }
#hd .hd-col55 { width: 55%; }
#hd .hd-col60 { width: 60%; }
#hd .hd-col66 { width: 66.6666%; }
#hd .hd-col65 { width: 65%; }
#hd .hd-col70 { width: 70%; }
#hd .hd-col75 { width: 75%; }
#hd .hd-col80 { width: 80%; }
#hd .hd-col90 { width: 90%; }
#hd .hd-col100 { width: 100%; }
#hd .ib-top { display: inline-block; vertical-align: top; }
#hd .ib-bottom { display: inline-block; vertical-align: bottom; }
#hd .flex-wrap { display: flex; flex-wrap: wrap; }
#hd .flex-nowrap { display: flex; flex-wrap: nowrap; }
#hd .flex-row-reverse { flex-direction: row-reverse; }
#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 .ml-auto { margin-left: auto; }
#hd .mr-auto { margin-right: auto; }
#hd .mx-auto { margin-left: auto; margin-right: auto; }
#hd .hd-d-768-block { display: none; }
#hd .hd-d-none { display: none !important; }

@media screen and (min-width: 2560px) { #hd .hd-w900 { max-width: 1100px; }
  #hd .hd-w1000 { max-width: 1400px; }
  #hd .hd-w1100 { max-width: 1500px; }
  #hd .hd-w1200 { max-width: 1500px; }
  #hd .hd-w1300 { max-width: 1600px; }
  #hd .hd-w1400 { max-width: 1800px; }
  #hd .hd-w1600 { max-width: 2000px; } }
@media screen and (min-width: 3000px) { #hd .hd-w900 { max-width: 1500px; }
  #hd .hd-w1000 { max-width: 1800px; }
  #hd .hd-w1100 { max-width: 2100px; }
  #hd .hd-w1200 { max-width: 2200px; }
  #hd .hd-w1300 { max-width: 2400px; }
  #hd .hd-w1400 { max-width: 2600px; }
  #hd .hd-w1600 { max-width: 2800px; } }
@media screen and (max-width: 1024px) { #hd .hd-d-1024-none { display: none !important; }
  #hd .hd-d-1024-block { display: block !important; }
  #hd .hd-d-1024-inline-block { display: inline-block !important; } }
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 1023px) { #hd .hd-d-portrait-none { display: none !important; }
  #hd .hd-d-portrait-block { display: block !important; } }
@media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none !important; }
  #hd .hd-d-1023-block { display: block !important; }
  #hd .hd-d-1023-inline-block { display: inline-block !important; } }
@media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none !important; }
  #hd .hd-d-768-block { display: block !important; } }
@media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none !important; }
  #hd .hd-d-620-block { display: block !important; }
  #hd .hd-d-620-ib { display: inline-block !important; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none !important; }
  #hd .hd-d-480-block { display: block !important; } }
#hd .trigger-video { cursor: pointer; position: relative; overflow: hidden; }
#hd .trigger-video .hd-cover { transition: transform 0.6s ease; }
#hd .trigger-video:hover .hd-cover, #hd .trigger-video:focus-visible .hd-cover { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
#hd .trigger-video:active .play { -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); }
#hd .trigger-video .play { width: 5em; height: 5em; border-radius: 4em; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transition: transform 0.6s ease; }
#hd .vid-container { width: 100%; height: 0; padding-bottom: 56.25%; background: black; position: relative; overflow: hidden; }
#hd .vid-container.trigger-video-toggle .vid-control { cursor: pointer; }
#hd .vid-container.trigger-video-toggle .vid-control:focus { opacity: 1; }
#hd .vid-container video, #hd .vid-container iframe { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: opacity 0.25s ease; }
#hd .vid-container h2 { opacity: 0; }
#hd .vid-control { width: 44px; height: 44px; background: none; border: none; box-shadow: none; position: absolute; right: 5%; bottom: 20px; margin: 5px; transition: all 0.3s ease-out; z-index: 2; }
#hd .vid-control svg { width: 100%; height: 100%; }
#hd .vid-control img, #hd .vid-control svg { width: 80%; height: 80%; position: absolute; top: 0; right: 0; bottom: 0; left: 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; }

@media screen and (max-width: 768px) { #hd .trigger-video .play { width: 3em; height: 3em; }
  #hd .vid-control { width: 44px; height: 44px; } }
body.no-scroll { overflow: hidden; }

#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: 90%; height: auto; max-width: 960px; max-height: 540px; background: black; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 50px; 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; }
#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 > span { 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 > span:first-child { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
#hd .hd-lightbox .hd-close > span:last-child { -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); }
#hd .hd-term-lightbox .hd-box { height: calc(100% - 120px); }
#hd .hd-term-lightbox .hd-content { padding: 2em 2em 4em; height: 100%; position: relative; overflow-y: auto; }
#hd .hd-term-lightbox .hd-content::-webkit-scrollbar { width: 5px; }
#hd .hd-term-lightbox .hd-content::-webkit-scrollbar-track { background: #555; }
#hd .hd-term-lightbox .hd-content::-webkit-scrollbar-thumb { background: #b99770; }
#hd .hd-term-lightbox .hd-content::-webkit-scrollbar-thumb:hover { background: #aaa; }
#hd .hd-term-lightbox h4 { margin-top: 1em; }
#hd .hd-form-lightbox .hd-box { max-width: 40em; height: auto; }
#hd .hd-form-lightbox .hd-content { padding: 2em 2em 4em; height: 100%; position: relative; overflow-y: auto; }
#hd .hd-form-lightbox .hd-content::-webkit-scrollbar { width: 5px; }
#hd .hd-form-lightbox .hd-content::-webkit-scrollbar-track { background: #555; }
#hd .hd-form-lightbox .hd-content::-webkit-scrollbar-thumb { background: #b99770; }
#hd .hd-form-lightbox .hd-content::-webkit-scrollbar-thumb:hover { background: #aaa; }
#hd .hd-form-lightbox h4 { margin-top: 1em; }
#hd .trigger-play { cursor: pointer; }

@media screen and (max-width: 1024px) { #hd .hd-lightbox .hd-box { margin-top: 20px; }
  #hd .hd-lightbox .hd-close { width: 2.75em; height: 2.75em; }
  #hd .hd-lightbox .hd-close > span { width: 1.25em; height: 2px; } }
@media screen and (max-width: 620px) { #hd .hd-lightbox .hd-box { width: 100%; }
  #hd .hd-term-lightbox .hd-content { padding-left: 1em; padding-right: 1em; }
  #hd .hd-term-lightbox .hd-content li { font-size: .9em; }
  #hd .hd-term-lightbox .hd-content li > p { font-size: 1em; }
  #hd .hd-term-lightbox .hd-content p { font-size: .9em; } }
#hd .hd-nav { font-size: 14px; position: fixed; z-index: 9; top: 50%; right: 56px; opacity: 1; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }
#hd .hd-nav ul { margin: 0; padding: 0; }
#hd .hd-nav ul li { display: block; margin: 1em 0; position: relative; }
#hd .hd-nav ul li a { text-decoration: none; display: block; z-index: 1; cursor: pointer; }
#hd .hd-nav ul li a span { display: block; width: .7em; height: .7em; background: transparent; border: 1px solid white; z-index: 1; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: transform 0.1s ease-in-out, background 0.6s ease; }
#hd .hd-nav ul li a:hover span { -webkit-transform: rotate(45deg); transform: rotate(45deg); background: white; }
#hd .hd-nav ul li a.hd-active span { -webkit-transform: rotate(0deg); transform: rotate(0deg); background: white; }
#hd .hd-nav ul li .hd-tooltip { display: block; max-width: 220px; height: 1.5em; font-family: "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; text-transform: uppercase; font-size: .875rem; color: white; white-space: nowrap; overflow: hidden; opacity: 0; position: absolute; top: 4px; bottom: 0; right: 20px; margin: auto 0; -webkit-transform: translate(10px, 0); transform: translate(10px, 0); }
#hd .hd-nav ul li:hover .hd-tooltip { width: auto; opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); transition: opacity 0.2s ease-in, transform 0.4s ease; }
#hd .scroll-up { position: fixed; right: 55px; bottom: 30px; width: 45px; height: 45px; text-align: center; cursor: pointer; border-radius: 50%; border: 2px solid #b99770; transition: opacity 0.4s ease; z-index: 9; }
#hd .scroll-up svg { display: block; position: absolute; margin: auto; top: 0; right: 0; bottom: 5px; left: 0; fill: #b99770; -webkit-transform: rotate(270deg); transform: rotate(270deg); }
#hd .scroll-up:hover { background-color: #b99770; }
#hd .scroll-up:hover svg { fill: white; }

@media screen and (min-width: 2560px) { #hd .hd-nav { font-size: 16px; right: 100px; } }
@media screen and (max-width: 1440px) { #hd .hd-nav { right: 40px; }
  #hd .scroll-up { right: 40px; } }
@media screen and (max-width: 1024px) { #hd .hd-nav { font-size: 12px; right: 30px; }
  #hd .scroll-up { right: 30px; } }
@media screen and (max-width: 768px) { #hd .hd-nav { display: none; }
  #hd .hd-nav ul li .hd-tooltip { display: none; }
  #hd .scroll-up { right: 10px; } }
@media screen and (max-width: 480px) { #hd .scroll-up { bottom: 15px; right: 10px; } }
#hd .hd-btn { display: inline-block; font-family: "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-weight: 400; font-size: 1.125em; letter-spacing: .018em; color: white; padding: .4em 1.75em .6em; margin: 0; position: relative; z-index: 2; cursor: pointer; border-radius: 10px; background-color: #9f6a41; background-image: -moz-linear-gradient(45deg, #9f6a41, #b99770); background-image: -webkit-linear-gradient(45deg, #9f6a41, #b99770); background-image: linear-gradient(45deg, #9f6a41, #b99770); transition: background 0.4s ease, transform 0.25s ease; }
#hd .hd-btn:hover, #hd .hd-btn:focus-visible { -webkit-transform: translate(0, -2px); transform: translate(0, -2px); }
#hd .hd-btn:active { color: #d6d6d6; }
#hd .hd-btn.hd-btn-s { font-size: 1em; padding: .125em 1em .15em; opacity: .9; }
#hd .hd-btn.hd-btn-gradient { opacity: 1; border: none; color: white; background-color: #9f6a41; background-image: -moz-linear-gradient(0deg, #9f6a41, #b99770); background-image: -webkit-linear-gradient(0deg, #9f6a41, #b99770); background-image: linear-gradient(0deg, #9f6a41, #b99770); }
#hd .hd-btn.hd-btn-shine { letter-spacing: .08em; color: -primary; background: rgba(0, 0, 0, 0.25); border: 1px solid #b99770; border-image-slice: 1; border-image-source: -webkit-linear-gradient(bottom, #b99770, #9f6a41, #b99770); border-image-source: -o-linear-gradient(bottom, #b99770, #9f6a41, #b99770); border-image-source: linear-gradient(to top, #b99770, #9f6a41, #b99770); transition: background 0.4s ease, transform 0.25s ease; position: relative; }
#hd .hd-btn.hd-btn-shine:before, #hd .hd-btn.hd-btn-shine:after { content: ''; display: block; width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 80%); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 80%); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 80%); background-color: transparent; position: absolute; left: 0; margin: -2px 0; z-index: 2; }
#hd .hd-btn.hd-btn-shine:before { top: 0; }
#hd .hd-btn.hd-btn-shine:after { bottom: 0; }
#hd .hd-btn.hd-btn-arrow { border: none; position: relative; }
#hd .hd-btn.hd-btn-arrow:before { content: ''; position: absolute; inset: 0; background: #b99770; clip-path: polygon(0 0, calc(100% - 1.10em) 0, 100% 1.1em, 100% calc(100% - 1.10em), calc(100% - 1.10em) 100%, 0 100%, 0 0, 2px 2px, 2px calc(100% - 2px), calc(100% - 1.10em - 0.83px) calc(100% - 2px), calc(100% - 2px) calc(100% - 1.10em - 0.83px), calc(100% - 2px) calc(1.10em + 0.83px), calc(100% - 1.10em - 0.83px) 2px, 2px 2px); }
#hd .btn-more span { font: inherit; color: inherit; }
#hd .btn-more img { display: inline-block; vertical-align: middle; width: 0.75em; margin-left: 0.25em; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#hd .btn-more:hover, #hd .btn-more:focus-visible { background: rgba(255, 255, 255, 0.1); }
#hd .btn-more.hd-active img { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

@media screen and (max-width: 1024px) { #hd .hd-btn { font-size: 1em; } }
@media screen and (max-width: 768px) { #hd .hd-btn { border-width: 1px; } }
#hd .list-feature { display: flex; flex-wrap: wrap; text-align: center; margin: 2em 0 1.5em; }
#hd .list-feature li { padding: .5em 2em; }
#hd .list-feature strong { display: block; font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 2.75em; font-weight: 400; letter-spacing: -.02em; line-height: 1; margin-bottom: 0; }
#hd .list-feature strong span { font-family: "TTNormsProRegular", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: .5em; }
#hd .list-feature small { display: inline-block; font-size: 1.4em; font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-weight: 400; letter-spacing: -.02em; line-height: 1; padding-bottom: 0.25em; }
#hd .list-dash { padding-left: 0; }
#hd .list-dash li { font-weight: 300; padding-left: 1em; margin-bottom: .25em; position: relative; }
#hd .list-dash li:before { content: '-'; position: absolute; left: 0; top: 0; }
#hd .list-disc { padding-left: 0; }
#hd .list-disc li { font-weight: 300; padding-left: 1em; margin-bottom: .25em; position: relative; }
#hd .list-disc li:before { content: ''; width: .25em; height: .25em; border-radius: .25em; background: white; position: absolute; left: 0; top: .4em; }
#hd .list-square { padding-left: 0; }
#hd .list-square li { font-weight: 300; padding-left: 1em; margin-bottom: .25em; position: relative; }
#hd .list-square li:before { content: ''; width: .25em; height: .25em; background: white; position: absolute; left: 0; top: .4em; }
#hd .list-decimal { padding-left: 0; }
#hd .list-decimal li { list-style-type: decimal; list-style-position: inside; font-weight: 300; line-height: 1.25; margin-bottom: .25em; position: relative; text-indent: -1.5em; padding-left: 1.5em; }
#hd .list-decimal li > p { font-size: 1em; }
#hd .list-decimal p { font-size: 1em; line-height: 1.25; text-indent: 0; }

@media screen and (max-width: 1024px) { #hd .list-feature { margin: 1em 0; }
  #hd .list-feature strong { font-size: 2.5em; }
  #hd .list-feature small { font-size: 1.25em; } }
@media screen and (max-width: 768px) { #hd .list-feature strong { font-size: 1.75em; }
  #hd .list-feature small { font-size: .875em; } }
#hd .tab-filter { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; background-color: #dcdcdc; margin: 2em auto .75em; text-align: center; z-index: 2; border-radius: 10em; padding: 7px 8px; }
#hd .tab-filter button { display: flex; align-items: center; justify-content: center; font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.3em; line-height: 1; letter-spacing: -.018em; border-radius: 10em; padding: .75em 1em; cursor: pointer; position: relative; transition: all 0.25s ease; }
#hd .tab-filter button[aria-selected="true"] { cursor: default; background-color: rgba(0, 0, 0, 0.2); background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9) 30%); background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9) 30%); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9) 30%); }
#hd .tab-filter button[aria-selected="true"] span { display: inline-block; color: white; }
#hd .bg-black .tab-filter { background-color: #00000099; }
#hd .bg-black .tab-filter button { color: white; }
#hd .bg-black .tab-filter button:hover, #hd .bg-black .tab-filter button:focus-visible { color: #b99770; }
#hd .bg-black .tab-filter button[aria-selected="true"] { background-color: rgba(255, 255, 255, 0); background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); }
#hd .bg-black .tab-filter button[aria-selected="true"] span { background-color: #dec9a8; background-image: -moz-linear-gradient(90deg, #dec9a8, #b08761); background-image: -webkit-linear-gradient(90deg, #dec9a8, #b08761); background-image: linear-gradient(90deg, #dec9a8, #b08761); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .bg-black .tab-filter button[aria-selected="true"]::selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .bg-black .tab-filter button[aria-selected="true"]::-moz-selection { background: #131313; color: #b99770; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .tab-content > div { display: none; position: relative; }
#hd .tab-content > div[aria-current="true"] { display: block; }

@media screen and (max-width: 1024px) { #hd .tab-filter button { font-size: 1.1em; }
  #hd .bg-black .tab-filter { background-color: #111; } }
@media screen and (max-width: 620px) { #hd .tab-filter { width: 110%; margin-left: -5%; border-radius: 0; position: relative; overflow-x: auto; overflow-y: hidden; }
  #hd .tab-filter::-webkit-scrollbar { height: 2px; }
  #hd .tab-filter::-webkit-scrollbar-track { background: #fff; }
  #hd .tab-filter::-webkit-scrollbar-thumb { background: #aaa; }
  #hd .tab-filter::-webkit-scrollbar-thumb:hover { background: #555; }
  #hd .tab-filter button { max-width: 40vw; flex-shrink: 0; font-size: 1em; padding: 0.5em 1em; } }
@media screen and (max-width: 480px) { #hd .tab-filter { padding: 4px 6px; }
  #hd .tab-filter button { font-size: 1em; }
  #hd .bg-black .tab-filter::-webkit-scrollbar-track { background: #111; }
  #hd .bg-black .tab-filter::-webkit-scrollbar-thumb { background: #444; }
  #hd .bg-black .tab-filter::-webkit-scrollbar-thumb:hover { background: #aaa; } }
#hd .swiper-button-prev, #hd .swiper-button-next { width: 44px; height: 44px; border-radius: 50%; background: white 55% center no-repeat; background-size: 30%; position: absolute; opacity: .7; margin: 20px; transition: transform 0.25s ease; }
#hd .swiper-button-prev:after, #hd .swiper-button-next:after { display: none; }
#hd .swiper-button-prev:hover, #hd .swiper-button-prev:focus-visible, #hd .swiper-button-next:hover, #hd .swiper-button-next:focus-visible { opacity: 1; }
#hd .swiper-button-prev:active, #hd .swiper-button-next:active { opacity: .9; }
#hd .swiper-button-prev.swiper-button-disabled, #hd .swiper-button-next.swiper-button-disabled { opacity: 0; pointer-events: none; }
#hd .swiper-button-prev { left: 0; background-image: url(../img/carousel-arrow-left.svg); background-position: 45% center; }
#hd .swiper-button-next { right: 0; background-image: url(../img/carousel-arrow-right.svg); }
#hd .swiper-pagination, #hd .swiper-pagination-bullets { width: auto; bottom: 0; position: relative; }
#hd .swiper-pagination-bullets { display: flex; align-items: center; }
#hd .swiper-pagination-bullet { width: .875em; height: .875em; border-radius: .5em; margin: .3em; background: #afafaf; opacity: 1; position: relative; overflow: hidden; }
#hd .swiper-pagination-bullet:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; background: #fff; transform-origin: left center; -webkit-transform: scale(0, 1); transform: scale(0, 1); }
#hd .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 3.5em; }
#hd .swiper-pagination-bullet.swiper-pagination-bullet-active:before { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .swiper-pagination-bullet.swiper-paused:before { animation-play-state: paused !important; }
#hd .swiper-pagination-wrapper { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; margin: 1.5em 0 1em; }
#hd .swiper-pause-btn { flex-shrink: 0; width: 3em; height: 3em; background: center no-repeat; background-size: contain; cursor: pointer; margin-left: 1em; position: relative; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
#hd .swiper-pause-btn img { width: 70%; height: 70%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .swiper-pause-btn .play { display: none; }
#hd .swiper-pause-btn:hover, #hd .swiper-pause-btn:focus-visible { opacity: 1; }
#hd .swiper-pause-btn.is-active .play { display: block; }
#hd .swiper-pause-btn.is-active .pause { display: none; }

@media screen and (max-width: 1280px) { #hd .swiper-button-prev, #hd .swiper-button-next { width: 3em; height: 3em; } }
@media screen and (max-width: 768px) { #hd .swiper-button-prev, #hd .swiper-button-next { width: 3.14em; height: 3.14em; margin: 0; }
  #hd .swiper-pagination-wrapper { margin: .5em 0; } }
@media screen and (max-width: 480px) { #hd .swiper-button-prev, #hd .swiper-button-next { display: none; } }
#hd .bg-black { background: #131519; color: white; }
#hd .bg-black h2, #hd .bg-black h3 { color: white !important; }
#hd .bg-blue { background: #1c1c1c; color: white; }

#hd .sec-kv { position: relative; overflow: hidden; }
#hd .sec-kv .hd-wrapper { position: relative; }
#hd .sec-kv .hd-container { display: flex; flex-direction: column; justify-content: center; padding: 2em 0; position: absolute; bottom: 67%; right: 0; left: 0; margin: 0 auto; z-index: 2; }
#hd .sec-kv .hd-logo { display: inline-block; width: 2.55em; }
#hd .sec-kv .logo-mac { width: 4em; position: absolute; left: 68%; top: 45%; z-index: 2; }
#hd .sec-kv figure { position: relative; }
#hd .sec-kv figure:after { content: ""; position: absolute; width: 100%; height: 10%; bottom: 0; left: 0; background-color: rgba(28, 28, 28, 0); background-image: -moz-linear-gradient(180deg, rgba(28, 28, 28, 0), #1c1c1c); background-image: -webkit-linear-gradient(180deg, rgba(28, 28, 28, 0), #1c1c1c); background-image: linear-gradient(180deg, rgba(28, 28, 28, 0), #1c1c1c); }
#hd .sec-kv h2 { font-size: 3.25em; font-weight: normal; letter-spacing: 0; line-height: 1.15; color: white !important; margin-bottom: 0; }
#hd .sec-kv h2 span { display: block; font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 0.55em; letter-spacing: -.018em; margin-bottom: .25em; background-color: #dfc9a9; background-image: -moz-linear-gradient(0deg, #dfc9a9, #c79f6f 42%, #dfc9a9); background-image: -webkit-linear-gradient(0deg, #dfc9a9, #c79f6f 42%, #dfc9a9); background-image: linear-gradient(0deg, #dfc9a9, #c79f6f 42%, #dfc9a9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .sec-kv h2 span::selection { background: #131313; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .sec-kv h2 span::-moz-selection { background: #131313; -webkit-background-clip: unset; -webkit-text-fill-color: #b99770; }
#hd .sec-kv h2 strong { font-family: "TTNormsProRegular", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-weight: normal; padding-left: .06em; }
#hd .sec-kv .hd-txt { margin-top: 2.5em; }

@media screen and (max-width: 1440px) { #hd .sec-kv h2 { font-size: 3em; } }
@media screen and (max-width: 1280px) { #hd .sec-kv .hd-container { bottom: 65%; }
  #hd .sec-kv h2 { font-size: 2.75em; }
  #hd .sec-kv h2 span { font-size: 0.65em; } }
@media screen and (max-width: 1024px) { #hd .sec-kv { padding-bottom: 6em; }
  #hd .sec-kv .hd-container { position: relative; padding: 0; }
  #hd .sec-kv .hd-bg { width: 160%; margin-left: -30%; margin-top: -15%; margin-bottom: -10%; max-width: none !important; }
  #hd .sec-kv .hd-txt { margin-top: 0; }
  #hd .sec-kv h2 { margin-bottom: 0.25em; } }
@media screen and (max-width: 768px) { #hd .sec-kv { padding-bottom: 3em; }
  #hd .sec-kv h2 { font-size: 2.4em; } }
@media screen and (max-width: 620px) { #hd .sec-kv h2 { font-size: 1.75em; } }
#hd .sec-ksp { padding: 6em 0; position: relative; z-index: 2; }
#hd .sec-ksp > .hd-bg { width: 100%; position: absolute; bottom: 0; left: 0; pointer-events: none; user-select: none; }
#hd .sec-ksp .list-ksp { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: auto; grid-column-gap: 10px; grid-row-gap: 10px; max-width: 64em; margin: 0 auto; }
#hd .sec-ksp .list-ksp > li:nth-child(1) { grid-area: 1 / 1 / 2 / 5; }
#hd .sec-ksp .list-ksp > li:nth-child(2) { grid-area: 1 / 5 / 2 / 9; }
#hd .sec-ksp .list-ksp > li:nth-child(3) { grid-area: 2 / 1 / 3 / 5; }
#hd .sec-ksp .list-ksp > li:nth-child(4) { grid-area: 2 / 5 / 3 / 9; }
#hd .sec-ksp .list-ksp > li:nth-child(5) { grid-area: 1 / 9 / 3 / 13; }
#hd .sec-ksp .list-ksp > li:nth-child(6) { grid-area: 3 / 1 / 4 / 5; }
#hd .sec-ksp .list-ksp > li:nth-child(7) { grid-area: 3 / 5 / 4 / 9; }
#hd .sec-ksp .list-ksp > li:nth-child(8) { grid-area: 3 / 9 / 4 / 13; }
#hd .sec-ksp .list-ksp > li:nth-child(9) { grid-area: 4 / 1 / 5 / 5; }
#hd .sec-ksp .list-ksp > li:nth-child(10) { grid-area: 4 / 5 / 5 / 9; }
#hd .sec-ksp .list-ksp > li:nth-child(11) { grid-area: 4 / 9 / 5 / 13; }
#hd .sec-ksp .list-ksp > li:nth-child(12) { grid-area: 5 / 1 / 6 / 4; }
#hd .sec-ksp .list-ksp > li:nth-child(13) { grid-area: 5 / 4 / 6 / 7; }
#hd .sec-ksp .list-ksp > li:nth-child(14) { grid-area: 5 / 7 / 6 / 10; }
#hd .sec-ksp .list-ksp > li:nth-child(15) { grid-area: 5 / 10 / 6 / 13; }
#hd .sec-ksp .list-ksp > li:nth-child(-n + 4) { width: 80%; margin-right: -20%; }
#hd .sec-ksp .list-ksp > li:nth-child(-n + 4) .hd-frame { padding-block: 17%; }
#hd .sec-ksp .list-ksp > li:nth-child(2), #hd .sec-ksp .list-ksp > li:nth-child(4) { margin-left: -20%; }
#hd .sec-ksp .list-ksp > li:nth-child(5) { width: 140%; margin-left: -40%; }
#hd .sec-ksp .list-ksp > li:nth-child(5) .hd-frame { padding: 5% 7%; }
#hd .sec-ksp .list-ksp > li:nth-child(5) .hd-pd { width: 72%; position: absolute; top: 0; right: 0; }
#hd .sec-ksp .list-ksp > li:nth-child(5) h3 { width: 100%; margin-top: auto; text-align: left; }
#hd .sec-ksp .list-ksp > li:nth-child(5) h3 span { max-width: 10em; }
#hd .sec-ksp .list-ksp > li:nth-child(6) .hd-frame, #hd .sec-ksp .list-ksp > li:nth-child(7) .hd-frame, #hd .sec-ksp .list-ksp > li:nth-child(8) .hd-frame { padding-block: 12%; }
#hd .sec-ksp .list-ksp > li:nth-child(9) .hd-frame, #hd .sec-ksp .list-ksp > li:nth-child(10) .hd-frame, #hd .sec-ksp .list-ksp > li:nth-child(11) .hd-frame { padding-block: 5%; }
#hd .sec-ksp .list-ksp > li:nth-child(9) .hd-logo { width: 90%; max-width: 266px !important; }
#hd .sec-ksp .list-ksp > li:nth-child(10) { width: 70%; }
#hd .sec-ksp .list-ksp > li:nth-child(10) .hd-logo { width: 60%; }
#hd .sec-ksp .list-ksp > li:nth-child(11) { width: 130%; margin-left: -30%; }
#hd .sec-ksp .list-ksp > li:nth-child(11) .hd-logo { width: 90%; }
#hd .sec-ksp .list-ksp > li:nth-child(12) { width: 100%; }
#hd .sec-ksp .list-ksp > li:nth-child(12) h3 { display: flex; align-items: center; justify-content: center; text-align: left; margin-bottom: 0.5em; }
#hd .sec-ksp .list-ksp > li:nth-child(12) h3 img { width: 3.5em; margin-right: 0.5em; margin-left: auto; }
#hd .sec-ksp .list-ksp > li:nth-child(12) h3 span { display: block; width: 5em; }
#hd .sec-ksp .list-ksp > li:nth-child(12) li { padding: 4px; }
#hd .sec-ksp .list-ksp > li:nth-child(12) li .hd-frame { padding-block: 25%; border: 1px solid rgba(255, 255, 255, 0.25); }
#hd .sec-ksp .list-ksp > li:nth-child(12) p { font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.125em; line-height: 1.125; }
#hd .sec-ksp .list-ksp > li:nth-child(13) { width: 75%; }
#hd .sec-ksp .list-ksp > li:nth-child(14) { width: 120%; margin-left: -25%; }
#hd .sec-ksp .list-ksp > li:nth-child(14) .hd-pd { width: 80%; margin-top: 20px; }
#hd .sec-ksp .list-ksp > li:nth-child(15) { width: 105%; margin-left: -5%; }
#hd .sec-ksp .list-ksp > li:nth-child(15) .hd-logo { width: 80%; max-width: 251px !important; }
#hd .sec-ksp .list-ksp > li:nth-child(15) p { display: block; font-family: "TTNormsProRegular", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1em; line-height: 1.25; letter-spacing: 0; margin-top: .5em; }
#hd .sec-ksp .hd-frame { width: 100%; height: 100%; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8% .5em; border-radius: 16px; position: relative; z-index: 3; }
#hd .sec-ksp .hd-frame:before { content: ''; display: none; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; position: absolute; inset: 0; margin: -1px; background-color: #dec9a8; background-image: -moz-linear-gradient(215deg, #dec9a8, #ccab81, #493B2B); background-image: -webkit-linear-gradient(215deg, #dec9a8, #ccab81, #493B2B); background-image: linear-gradient(215deg, #dec9a8, #ccab81, #493B2B); z-index: -2; opacity: 0.5; }
#hd .sec-ksp .hd-frame.frame-border:before { display: block; }
#hd .sec-ksp .hd-frame .hd-bg { width: 100%; height: 100%; border-radius: inherit; position: absolute; inset: 0; object-fit: cover; z-index: -1; }
#hd .sec-ksp h3 { font-family: "TTNormsProBold", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-weight: normal; font-size: 2em; letter-spacing: -.05; line-height: 1.125; margin-bottom: 0; color: white !important; }
#hd .sec-ksp h3.txt-smaller { font-size: 1.5em; }
#hd .sec-ksp h3 small { display: block; font-family: "TTNormsProRegular", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: .6em; line-height: 1; letter-spacing: 0; margin-top: .2em; }
#hd .sec-ksp p { font-size: .8em; line-height: 1.125; letter-spacing: 0; }
#hd .sec-ksp .monitor { width: 60%; -webkit-transform: translate(-5%, 0); transform: translate(-5%, 0); }
#hd .sec-ksp .logo-displayhdr { width: 75%; }
#hd .sec-ksp .logo-kvm { width: 6em; margin-bottom: 0.25em; }
#hd .sec-ksp .logo-calman { width: 90%; }

@media screen and (max-width: 1024px) { #hd .sec-ksp { padding: 0 0 4em; }
  #hd .sec-ksp .list-ksp > li:nth-child(12) li .hd-frame { padding-block: 15%; }
  #hd .sec-ksp .list-ksp > li:nth-child(12) p { font-size: 1em; }
  #hd .sec-ksp .hd-frame h3 { font-size: 1.8em; }
  #hd .sec-ksp .hd-frame h3.txt-smaller { font-size: 1.25em; } }
@media screen and (max-width: 768px) { #hd .sec-ksp .list-ksp { max-width: 28em; grid-template-columns: repeat(2, 1fr); }
  #hd .sec-ksp .list-ksp > li:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  #hd .sec-ksp .list-ksp > li:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
  #hd .sec-ksp .list-ksp > li:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(6) { grid-area: 4 / 1 / 5 / 2; }
  #hd .sec-ksp .list-ksp > li:nth-child(7) { grid-area: 4 / 2 / 5 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(8) { grid-area: 5 / 1 / 6 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(9) { grid-area: 6 / 1 / 7 / 2; }
  #hd .sec-ksp .list-ksp > li:nth-child(10) { grid-area: 6 / 2 / 7 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(11) { grid-area: 7 / 1 / 8 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(12) { grid-area: 8 / 1 / 9 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(13) { grid-area: 9 / 1 / 10 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(14) { grid-area: 10 / 1 / 11 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(15) { grid-area: 11 / 1 / 12 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(n) { width: 100%; margin-inline: 0; }
  #hd .sec-ksp .list-ksp > li:nth-child(5) .hd-frame { padding: 0; }
  #hd .sec-ksp .list-ksp > li:nth-child(5) .hd-pd { width: 80%; position: relative; margin-right: 0; margin-bottom: -18%; }
  #hd .sec-ksp .list-ksp > li:nth-child(5) h3 { padding: 5%; }
  #hd .sec-ksp .list-ksp > li:nth-child(8) .hd-frame { padding-block: 8%; }
  #hd .sec-ksp .list-ksp > li:nth-child(9) { width: 120%; }
  #hd .sec-ksp .list-ksp > li:nth-child(9) .hd-frame { padding-block: 8%; }
  #hd .sec-ksp .list-ksp > li:nth-child(10) { width: 80%; margin-left: 20%; }
  #hd .sec-ksp .list-ksp > li:nth-child(10) .hd-frame { padding-block: 8%; }
  #hd .sec-ksp .hd-frame { padding: 9% 0.5em; }
  #hd .sec-ksp .hd-frame h3.txt-smaller { font-size: 1.5em; } }
@media screen and (max-width: 480px) { #hd .sec-ksp .list-ksp { grid-column-gap: 6px; grid-row-gap: 6px; }
  #hd .sec-ksp .list-ksp > li:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  #hd .sec-ksp .list-ksp > li:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(3) { grid-area: 2 / 1 / 3 / 2; }
  #hd .sec-ksp .list-ksp > li:nth-child(4) { grid-area: 2 / 2 / 3 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(5) { grid-area: 3 / 1 / 4 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(6) { grid-area: 4 / 1 / 5 / 2; }
  #hd .sec-ksp .list-ksp > li:nth-child(7) { grid-area: 4 / 2 / 5 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(8) { grid-area: 5 / 1 / 6 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(9) { grid-area: 6 / 1 / 7 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(10) { grid-area: 7 / 1 / 8 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(11) { grid-area: 8 / 1 / 9 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(12) { grid-area: 9 / 1 / 10 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(13) { grid-area: 10 / 1 / 11 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(14) { grid-area: 11 / 1 / 12 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(15) { grid-area: 12 / 1 / 13 / 3; }
  #hd .sec-ksp .list-ksp > li:nth-child(9) { width: 100%; }
  #hd .sec-ksp .list-ksp > li:nth-child(10) { width: 100%; margin-left: 0; }
  #hd .sec-ksp .list-ksp > li:nth-child(10) .hd-logo { width: 40%; }
  #hd .sec-ksp .list-ksp > li:nth-child(13) .hd-frame { padding-block: 5%; }
  #hd .sec-ksp .hd-frame h3 { font-size: 1.6em; } }
@media screen and (max-width: 375px) { #hd .sec-ksp .hd-frame h3 { font-size: 1.4em; } }
#hd .sec-video { padding: 0; margin-bottom: -2px; position: relative; overflow: hidden; }
#hd .sec-video .hd-container { position: relative; }
#hd .sec-video .vid-control { right: auto; left: 5%; bottom: 30px; }
#hd .sec-video .btn-container { display: flex; justify-content: center; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto 36px; z-index: 2; pointer-events: none; }
#hd .sec-video .hd-btn { font-family: "TTNormsProRegular", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.125em; letter-spacing: 0; background: black; border-radius: 2em; padding: .75em .75em .75em 1em; border: none; color: white; pointer-events: all; box-shadow: none; transition: background 0.25s; }
#hd .sec-video .hd-btn span { display: inline-block; vertical-align: middle; width: 1.4em; height: 1.4em; border-radius: 1em; background: white; margin-left: 0.5em; margin-top: -.15em; position: relative; }
#hd .sec-video .hd-btn span:after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #000000; position: absolute; top: 0; right: 0; bottom: 0; left: 2px; margin: auto; }
#hd .sec-video .hd-btn:hover, #hd .sec-video .hd-btn:focus-visible { background: #1e1e1e; -webkit-transform: translate(0, 0); transform: translate(0, 0); }

@media screen and (max-width: 1024px) { #hd .sec-video .btn-container { margin-bottom: 10px; }
  #hd .sec-video .vid-control { bottom: 5px; } }
@media screen and (max-width: 620px) { #hd .sec-video .btn-container { position: relative; margin: 10px auto; }
  #hd .sec-video .vid-control { bottom: 0; left: 0; } }
#hd .sec-creator { padding: 6% 0; position: relative; overflow: hidden; }
#hd .sec-creator h2 { margin-bottom: 1em; }
#hd .sec-creator .hd-wrapper { padding-top: 2.5%; position: relative; }
#hd .sec-creator .hd-bg { position: absolute; width: 100%; inset: 0; pointer-events: none; user-select: none; }
#hd .sec-creator .list-creator { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 2%; grid-row-gap: 10px; }
#hd .sec-creator .list-creator img { border-radius: 16px; position: relative; overflow: hidden; }
#hd .sec-creator h3 { margin-top: 10px; margin-bottom: 0.4em; }
#hd .sec-creator p { padding-right: 2em; }

@media screen and (max-width: 1024px) { #hd .sec-creator p { padding-right: 0.5em; }
  #hd .sec-creator h2 { margin-bottom: .5em; } }
@media screen and (max-width: 768px) { #hd .sec-creator { padding: 10% 0; }
  #hd .sec-creator .hd-wrapper { padding-top: 5%; } }
@media screen and (max-width: 620px) { #hd .sec-creator .hd-bg { width: 200%; max-width: none !important; }
  #hd .sec-creator .list-creator { display: block; }
  #hd .sec-creator .list-creator > li { width: 100%; max-width: 360px; margin: 5% auto 16px; padding: 0; }
  #hd .sec-creator p { text-align: center; padding-right: 0; }
  #hd .sec-creator h3 { width: 100%; text-align: center; margin-top: 0.4em; margin-bottom: 0.2em; } }
@media screen and (max-width: 480px) { #hd .sec-creator { padding: 3em 0; } }
#hd .sec-ideal { padding: 9em 0; position: relative; }
#hd .sec-ideal .hd-content { padding-top: 3%; padding-left: 10%; }
#hd .sec-ideal .list-feature { margin-bottom: 0; }
#hd .sec-ideal .list-feature > li { padding-inline: 1.5em; }
#hd .sec-ideal figure { border-radius: 16px; position: relative; overflow: hidden; margin-right: -5%; }
#hd .sec-ideal figure img { width: 100%; }

@media screen and (max-width: 1024px) { #hd .sec-ideal { padding: 6em 0; }
  #hd .sec-ideal .hd-content { width: 100%; padding-left: 0; margin-bottom: 1em; text-align: center; }
  #hd .sec-ideal .list-feature { margin-right: 0; justify-content: center; margin: 1em 0 0; }
  #hd .sec-ideal .list-feature > li:first-child { padding-left: 1.5em; }
  #hd .sec-ideal .list-feature > li:last-child { margin-right: 0; }
  #hd .sec-ideal figure { width: 100%; max-width: 600px !important; margin: 0 auto; } }
@media screen and (max-width: 620px) { #hd .sec-ideal { padding-top: 4em; } }
@media screen and (max-width: 480px) { #hd .sec-ideal { padding: 3em 0; }
  #hd .sec-ideal .list-feature > li { padding-inline: .5em; }
  #hd .sec-ideal .list-feature > li:first-child { padding-left: .5em; }
  #hd .sec-ideal .list-feature > li:last-child { margin-right: 0; padding-right: 0; } }
#hd .sec-miniled { padding: 6% 0; }
#hd .sec-miniled .hd-content { padding-left: 5%; }
#hd .sec-miniled figure { text-align: center; position: relative; }
#hd .sec-miniled figure img { width: 100%; }
#hd .sec-miniled figure .cover { position: absolute; inset: 0; }
#hd .sec-miniled figure .hd-mark { width: 50%; height: 100%; position: absolute; top: 0; }
#hd .sec-miniled figure .mark-left { left: -2.5%; }
#hd .sec-miniled figure .mark-right { right: 0; }
#hd .sec-miniled figure h3 { letter-spacing: 0; width: 100%; position: absolute; top: 100%; left: 0; right: 0; margin-bottom: 0; margin-top: 0.5em; }
#hd .sec-miniled figure p { font-size: 0.875em; width: 100%; position: absolute; top: 47%; left: 0; right: 0; }
#hd .sec-miniled figure .cover, #hd .sec-miniled figure h3, #hd .sec-miniled figure p { opacity: 0; }
#hd .sec-miniled figure.is-animated .cover { -webkit-animation-delay: 0.4s; -webkit-animation-duration: 0.6s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0.4s; -moz-animation-duration: 0.6s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0.4s; -o-animation-duration: 0.6s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0.4s; animation-duration: 0.6s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-miniled figure.is-animated h3 { -webkit-animation-delay: 0.25s; -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: 0.25s; -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: 0.25s; -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: 0.25s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-miniled figure.is-animated p { -webkit-animation-delay: 0.6s; -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: 0.6s; -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: 0.6s; -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: 0.6s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }

@media screen and (max-width: 1024px) { #hd .sec-miniled figure p { font-size: 0.75em; line-height: 1.125; } }
@media screen and (max-width: 768px) { #hd .sec-miniled { padding-bottom: 10%; }
  #hd .sec-miniled .hd-content { width: 100%; margin-bottom: 40px; text-align: center; }
  #hd .sec-miniled figure { width: 100%; max-width: 600px; margin: 0 auto 4em; } }
@media screen and (max-width: 620px) { #hd .sec-miniled figure h3 { font-size: 1em; } }
@media screen and (max-width: 480px) { #hd .sec-miniled { padding-bottom: 15%; }
  #hd .sec-miniled figure { margin-top: 5%; }
  #hd .sec-miniled figure .cover { margin-top: -5%; }
  #hd .sec-miniled figure p { top: 43%; } }
#hd .sec-brightness { padding: 7% 0; position: relative; overflow: hidden; }
#hd .sec-brightness .hd-bg { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; pointer-events: none; user-select: none; }
#hd .sec-brightness .hd-container { position: relative; z-index: 2; }
#hd .sec-brightness .hd-img-container { margin-left: 0; }
#hd .sec-brightness .hd-img-container img { width: 95%; margin: 0 auto; }
#hd .sec-brightness .hd-content { padding-left: 3%; margin-right: auto; }
#hd .sec-brightness .hd-content p { max-width: 24em; }
#hd .sec-brightness .logo-hdr { margin-left: 0; width: 17em; }
#hd .sec-brightness .list-feature { margin-top: 10%; margin-bottom: 0; }
#hd .sec-brightness .list-feature > li { padding-inline: 1.5em; margin-bottom: 16px; }
#hd .sec-brightness .list-feature > li:nth-child(2n-1) { padding-left: 0; }

@media screen and (max-width: 1280px) { #hd .sec-brightness .list-feature { margin-right: -10%; font-size: 0.9em; }
  #hd .sec-brightness .list-feature > li { padding-inline: 1em; } }
@media screen and (max-width: 768px) { #hd .sec-brightness .hd-bg { max-width: none !important; width: 200%; }
  #hd .sec-brightness .list-feature { margin-right: 0; justify-content: center; margin: 1em 0 0; }
  #hd .sec-brightness .list-feature > li { padding-inline: 1em !important; margin-bottom: 6px; }
  #hd .sec-brightness .hd-content { width: 100%; text-align: center; }
  #hd .sec-brightness .hd-content p { max-width: none; }
  #hd .sec-brightness .hd-img-container { width: 100%; max-width: 600px; margin: 0 auto; }
  #hd .sec-brightness .logo-hdr { width: 15em; } }
@media screen and (max-width: 480px) { #hd .sec-brightness .list-feature > li { padding-inline: .5em; }
  #hd .sec-brightness .list-feature > li:first-child { padding-left: .5em; }
  #hd .sec-brightness .list-feature > li:last-child { margin-right: 0; padding-right: 0; } }
#hd .sec-ai { background: #151422; padding: 100px 0 4%; position: relative; overflow: hidden; }
#hd .sec-ai .hd-main { width: 1920px; max-width: 1920px !important; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
#hd .sec-ai .hd-content { max-width: 23em; padding: 15% 0 15%; }
#hd .sec-ai .hd-bottom ul { display: grid; grid-template-columns: 1fr 1.75fr; grid-auto-rows: auto; grid-column-gap: 10px; grid-row-gap: 10px; }
#hd .sec-ai .hd-bottom li:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
#hd .sec-ai .hd-bottom li:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
#hd .sec-ai .hd-bottom li:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
#hd .sec-ai .hd-frame { width: 100%; height: 100%; display: inline-flex; flex-direction: column; justify-content: center; padding: 40px 40px 40px 50px; border-radius: 16px; position: relative; z-index: 3; }
#hd .sec-ai .hd-frame:before { content: ''; display: none; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; position: absolute; inset: 0; margin: -1px; background-color: #dec9a8; background-image: -moz-linear-gradient(45deg, #dec9a8, #ccab81, #493B2B); background-image: -webkit-linear-gradient(45deg, #dec9a8, #ccab81, #493B2B); background-image: linear-gradient(45deg, #dec9a8, #ccab81, #493B2B); z-index: -2; opacity: 0.5; }
#hd .sec-ai .hd-frame.frame-border:before { display: block; }
#hd .sec-ai .hd-frame .hd-bg { width: 100%; height: 100%; border-radius: inherit; position: absolute; inset: 0; object-fit: cover; z-index: -1; }
#hd .sec-ai h3 { line-height: 1.125em; }
#hd .sec-ai h3.txt-smaller { font-size: 1.5em; }
#hd .sec-ai h3 small { display: block; font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.125rem; line-height: 1; letter-spacing: 0; }

@media screen and (min-width: 2560px) { #hd .sec-ai .hd-main { width: 100%; max-width: 2560px !important; }
  #hd .sec-ai .hd-content { padding-bottom: 24%; } }
@media screen and (min-width: 3000px) { #hd .sec-ai .hd-main { width: 100%; max-width: 3840px !important; }
  #hd .sec-ai .hd-content { padding-bottom: 22%; } }
@media screen and (max-width: 1280px) { #hd .sec-ai .hd-main { width: 150%; } }
@media screen and (max-width: 1024px) { #hd .sec-ai .hd-content { padding-bottom: 17%; } }
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 1023px) { #hd .sec-ai { padding-top: 0; }
  #hd .sec-ai .hd-main { width: 200%; margin-left: -25%; margin-bottom: -50%; position: relative; }
  #hd .sec-ai h2 { width: 90%; position: absolute; top: 5%; left: 0; right: 0; margin: 0 auto; z-index: 2; }
  #hd .sec-ai .hd-content { width: 100%; max-width: 44em; padding: 0; margin: 0 auto 40px; }
  #hd .sec-ai .hd-frame { padding: 30px; } }
@media screen and (max-width: 768px) { #hd .sec-ai .hd-frame { padding: 20px; }
  #hd .sec-ai h3 { font-size: 1.5em; } }
@media screen and (max-width: 620px) { #hd .sec-ai .hd-bottom ul { display: block; }
  #hd .sec-ai .hd-bottom li { margin: 10px 0; }
  #hd .sec-ai .hd-frame { padding: 40px 30px; } }
@media screen and (max-width: 480px) { #hd .sec-ai { padding-top: 15%; background-color: #1b1e61; background-image: -moz-linear-gradient(180deg, #1b1e61 10%, #151422 20%); background-image: -webkit-linear-gradient(180deg, #1b1e61 10%, #151422 20%); background-image: linear-gradient(180deg, #1b1e61 10%, #151422 20%); }
  #hd .sec-ai h2 { position: relative; }
  #hd .sec-ai .hd-main { margin-top: -10%; }
  #hd .sec-ai .hd-frame { padding: 30px 20px; } }
#hd .sec-luxpixel { padding: 6% 0; }
#hd .sec-luxpixel .hd-content { width: 85%; margin: 0 auto; }
#hd .sec-luxpixel figure { margin: 0 auto; border-radius: 16px; position: relative; overflow: hidden; }
#hd .sec-luxpixel figure img { width: 100%; position: absolute; inset: 0; opacity: 0; }
#hd .sec-luxpixel figure .hd-base { opacity: 1; position: relative; }
#hd .sec-luxpixel figure.is-animated .hd-without { -webkit-animation-delay: 0.25s; -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: 0.25s; -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: 0.25s; -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: 0.25s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-luxpixel figure.is-animated .hd-without2 { -webkit-animation-delay: 0.4s; -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: 0.4s; -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: 0.4s; -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: 0.4s; animation-duration: 0.4s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-luxpixel figure.is-animated .hd-tag { -webkit-animation-delay: 1s; -webkit-animation-duration: 0.4s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 1s; -moz-animation-duration: 0.4s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 1s; -o-animation-duration: 0.4s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 1s; animation-duration: 0.4s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-luxpixel .hd-tag { font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 2.5em; letter-spacing: -.018em; position: absolute; z-index: 3; bottom: 80%; opacity: 0; }
#hd .sec-luxpixel .hd-tag span { display: block; -webkit-transform: skew(0deg, 1.1deg); transform: skew(0deg, 1.1deg); }
#hd .sec-luxpixel .hd-tag.tag-with { right: 58%; }
#hd .sec-luxpixel .hd-tag.tag-without { left: 49%; margin-top: .5%; }
#hd .sec-luxpixel .hd-aglr { width: 120%; max-width: none !important; margin: 30px -10% 20px; }

@media screen and (max-width: 1024px) { #hd .sec-luxpixel .hd-content { text-align: center; }
  #hd .sec-luxpixel .hd-tag { font-size: 4vw; } }
@media screen and (max-width: 768px) { #hd .sec-luxpixel { padding: 10% 0; }
  #hd .sec-luxpixel .hd-content { width: 100%; } }
@media screen and (max-width: 480px) { #hd .sec-luxpixel { padding: 15% 0; }
  #hd .sec-luxpixel .hd-aglr { width: 140%; margin-inline: -20%; margin-bottom: 10px; } }
#hd .sec-lightsync { padding: 4% 0; position: relative; }
#hd .sec-lightsync h2 + p { max-width: 44em; margin: 0 auto; }
#hd .sec-lightsync .tab-filter { max-width: 46em; }
#hd .sec-lightsync .tab-filter button { width: 50%; text-transform: none; }
#hd .sec-lightsync .tab-content p { max-width: 44em; margin: 0 auto 2em; }
#hd .sec-lightsync figure { border-radius: 16px; position: relative; overflow: hidden; }
#hd .sec-lightsync figure img { width: 100%; }
#hd .sec-lightsync .hd-tag { width: 50%; font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 2em; letter-spacing: -.018em; text-align: center; position: absolute; top: 5%; z-index: 3; opacity: 0; }
#hd .sec-lightsync .hd-tag span { display: block; -webkit-transform: skew(0deg, 1.1deg); transform: skew(0deg, 1.1deg); }
#hd .sec-lightsync .hd-tag.tag-with { left: 0; }
#hd .sec-lightsync .hd-tag.tag-without { right: 0; }
#hd #pageContent-fig-backlight .hd-mask { width: 43.25%; height: 0; padding-bottom: 24.3%; background: black; position: absolute; top: 24%; z-index: 2; }
#hd #pageContent-fig-backlight .hd-mask.mask-1 { left: 4%; }
#hd #pageContent-fig-backlight .hd-mask.mask-2 { right: 4%; }
#hd #pageContent-fig-backlight .hd-tag.tag-with { color: #c8a780; }
#hd #pageContent-fig-backlight .hd-tag.tag-without { color: #eeeeee; }
#hd #pageContent-fig-backlight.is-animated .mask-1 { -webkit-animation-delay: 1.2s; -webkit-animation-duration: 1.5s; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 1.2s; -moz-animation-duration: 1.5s; -moz-animation-name: fadeOut; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 1.2s; -o-animation-duration: 1.5s; -o-animation-name: fadeOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 1.2s; animation-duration: 1.5s; animation-name: fadeOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd #pageContent-fig-backlight.is-animated .mask-2 { -webkit-animation-delay: 1.2s; -webkit-animation-duration: 4s; -webkit-animation-name: fadeOut; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 1.2s; -moz-animation-duration: 4s; -moz-animation-name: fadeOut; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 1.2s; -o-animation-duration: 4s; -o-animation-name: fadeOut; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 1.2s; animation-duration: 4s; animation-name: fadeOut; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd #pageContent-fig-backlight.is-animated .hd-tag { -webkit-animation-delay: 1.2s; -webkit-animation-duration: 0.6s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 1.2s; -moz-animation-duration: 0.6s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 1.2s; -o-animation-duration: 0.6s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 1.2s; animation-duration: 0.6s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd #pageContent-fig-ambientlight .hd-light { position: absolute; inset: 0; }
#hd #pageContent-fig-ambientlight .hd-tag { top: 7%; }
#hd #pageContent-fig-ambientlight .hd-tag.tag-with { color: #9f6a41; }
#hd #pageContent-fig-ambientlight .hd-tag.tag-without { color: #333; }
#hd [aria-current="true"] #pageContent-fig-ambientlight .hd-light { -webkit-animation-delay: 1.2s; -webkit-animation-duration: 2.75s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 1.2s; -moz-animation-duration: 2.75s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 1.2s; -o-animation-duration: 2.75s; -o-animation-name: fadeIn; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 1.2s; animation-duration: 2.75s; animation-name: fadeIn; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd [aria-current="true"] #pageContent-fig-ambientlight .hd-tag { -webkit-animation-delay: 1.2s; -webkit-animation-duration: 0.6s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 1.2s; -moz-animation-duration: 0.6s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 1.2s; -o-animation-duration: 0.6s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 1.2s; animation-duration: 0.6s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }

@media screen and (max-width: 768px) { #hd .sec-lightsync .hd-tag { font-size: 3vw; } }
@media screen and (max-width: 620px) { #hd .sec-lightsync .tab-filter { justify-content: center; } }
#hd .sec-calibration { padding-top: 6em; position: relative; --padding: 48px; }
#hd .sec-calibration .list-frame { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; grid-column-gap: 16px; grid-row-gap: 16px; }
#hd .sec-calibration .list-frame > li:nth-child(3) { margin-top: -30%; }
#hd .sec-calibration .hd-frame { background-color: black; border-radius: 16px; position: relative; overflow: hidden; }
#hd .sec-calibration .hd-frame p { margin-bottom: 1em; text-shadow: 0 0 3px black; }
#hd .sec-calibration .hd-frame h3 { line-height: 1; }
#hd .sec-calibration .hd-frame h3 span { font-size: 0.875em; }
#hd .sec-calibration .frame-self .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center top; }
#hd .sec-calibration .frame-self .hd-pd { width: 100%; margin-right: auto; margin-bottom: -39%; position: relative; z-index: 2; }
#hd .sec-calibration .frame-self .hd-txt { padding: var(--padding); position: relative; z-index: 2; }
#hd .sec-calibration .frame-hardware { padding: var(--padding) var(--padding) 20px; margin-top: 5%; }
#hd .sec-calibration .frame-hardware .pd { position: relative; width: 84%; margin: 0 auto; }
#hd .sec-calibration .frame-hardware .hd-txt { position: relative; }
#hd .sec-calibration .frame-hardware .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; object-position: center top; }
#hd .sec-calibration .frame-hardware .hd-note a { color: #fff047; text-decoration: underline; }
#hd .sec-calibration .frame-hardware .hd-note a:hover, #hd .sec-calibration .frame-hardware .hd-note a:focus-visible { color: white; }
#hd .sec-calibration .frame-hardware ul { margin: 20px 0 12px; }
#hd .sec-calibration .frame-hardware ul li { min-width: 10em; border-radius: 10px; padding: 4% 6%; margin-right: 14px; font-family: "TTNormsProRegular", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; line-height: 1; text-align: center; background-color: rgba(100, 100, 100, 0.2); background-image: -moz-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.8), rgba(155, 155, 155, 0.2)); background-image: -webkit-linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.8), rgba(155, 155, 155, 0.2)); background-image: linear-gradient(-45deg, rgba(100, 100, 100, 0.2), rgba(0, 0, 0, 0.8), rgba(155, 155, 155, 0.2)); }
#hd .sec-calibration .frame-hardware ul strong { display: block; font-size: 2em; font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; }
#hd .sec-calibration .frame-color { background-color: #0f1724; background-image: -moz-linear-gradient(180deg, #0f1724 80%, black); background-image: -webkit-linear-gradient(180deg, #0f1724 80%, black); background-image: linear-gradient(180deg, #0f1724 80%, black); }
#hd .sec-calibration .frame-color img { width: 100%; }
#hd .sec-calibration .frame-color .hd-txt { padding: 0 var(--padding) var(--padding); margin-top: -18%; }
#hd .sec-calibration .frame-seamless { padding: 29% var(--padding); }
#hd .sec-calibration .frame-seamless .bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; }
#hd .sec-calibration .frame-seamless .hd-txt { position: relative; }
#hd .sec-calibration .frame-seamless .hd-txt p { max-width: 20em; margin-bottom: 1.5em; }
#hd .sec-calibration .frame-seamless .hd-txt img { width: 75%; margin-left: 0; }

@media screen and (max-width: 1024px) { #hd .sec-calibration .frame-hardware ul li { min-width: 0; }
  #hd .sec-calibration .frame-hardware ul strong { font-size: 1.5em; } }
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 1023px) { #hd .sec-calibration { --padding: 36px; } }
@media screen and (max-width: 768px) { #hd .sec-calibration { padding: 10% 0 6%; }
  #hd .sec-calibration .list-frame { display: block; max-width: 540px; margin: 0 auto; }
  #hd .sec-calibration .list-frame > li { margin-bottom: 10px; }
  #hd .sec-calibration .list-frame > li:nth-child(3) { margin-top: 0; }
  #hd .sec-calibration .hd-txt { text-align: center; }
  #hd .sec-calibration .frame-self .hd-pd { margin-bottom: -10%; }
  #hd .sec-calibration .frame-hardware ul { justify-content: center; position: relative; bottom: auto; right: auto; margin-inline: auto; width: 100%; max-width: 340px; }
  #hd .sec-calibration .frame-hardware .hd-txt { width: 100%; margin-top: 1em; }
  #hd .sec-calibration .frame-seamless { padding-block: 15%; }
  #hd .sec-calibration .frame-seamless .hd-txt p { max-width: none; margin-inline: auto; }
  #hd .sec-calibration .frame-seamless .hd-txt img { width: 70%; max-width: 217px !important; margin: 20px auto 0; } }
@media screen and (max-width: 620px) { #hd .sec-calibration { --padding: 30px; } }
@media screen and (max-width: 480px) { #hd .sec-calibration { --padding: 20px; }
  #hd .sec-calibration .frame-hardware { padding: 1.5em; }
  #hd .sec-calibration .frame-hardware .pd { width: 100%; }
  #hd .sec-calibration .frame-hardware ul li { margin-right: 0; }
  #hd .sec-calibration .frame-hardware ul li:first-child { margin-right: 4px; }
  #hd .sec-calibration .frame-color .hd-txt { padding: 0 1.5em 2em; }
  #hd .sec-calibration .frame-seamless { padding: 2em 1.5em; }
  #hd .sec-calibration .frame-seamless .hd-txt p { margin-bottom: .5em; } }
@media screen and (max-width: 375px) { #hd .sec-calibration { padding: 15% 0 10%; }
  #hd .sec-calibration .frame-hardware { padding: 1em; }
  #hd .sec-calibration .frame-color .hd-txt { padding: 0 1em 1.5em; }
  #hd .sec-calibration .frame-seamless { padding: 25% 1em; } }
#hd .sec-color { padding: 4% 0 0; position: relative; overflow: hidden; }
#hd .sec-color p { max-width: 43em; margin: 0 auto 1em; }
#hd .sec-color .list-feature { position: relative; z-index: 2; }
#hd .sec-color img { width: 95%; margin: -15% auto 0; }

#hd .sec-fidelity { padding-bottom: 6%; position: relative; overflow: hidden; }
#hd .sec-fidelity .hd-container { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; z-index: 2; }
#hd .sec-fidelity .hd-content { padding-top: 15%; }
#hd .sec-fidelity figure { margin-right: 2%; margin-left: auto; width: 59%; }
#hd .sec-fidelity figure img { width: 100%; }
#hd .sec-fidelity figure .hd-bg { opacity: 0; -webkit-transform: scale(0, 0); transform: scale(0, 0); transition: opacity 1s, transform 1s cubic-bezier(0.13, 0.7, 0.36, 1.23); }
#hd .sec-fidelity figure .hd-pd { position: absolute; inset: 0; margin: auto; }
#hd .sec-fidelity figure.is-animated .hd-bg { opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .sec-fidelity .list-feature { margin-top: 10%; }

@media screen and (max-width: 1280px) { #hd .sec-fidelity figure { width: 65%; margin-right: -5%; } }
@media screen and (max-width: 1024px) { #hd .sec-fidelity .hd-content { padding-top: 5%; }
  #hd .sec-fidelity .list-feature { margin-top: 5%; } }
@media screen and (max-width: 768px) { #hd .sec-fidelity { padding-top: 8%; padding-bottom: 5%; }
  #hd .sec-fidelity .hd-container { position: relative; }
  #hd .sec-fidelity .hd-content { width: 100%; text-align: center; }
  #hd .sec-fidelity .list-feature { justify-content: center; }
  #hd .sec-fidelity figure { width: 120%; margin-left: -10%; margin-top: -15%; } }
@media screen and (max-width: 480px) { #hd .sec-fidelity { padding-top: 18%; } }
#hd .sec-feature { padding-top: 4%; position: relative; overflow: hidden; }
#hd .sec-feature .hd-title { position: relative; z-index: 2; }
#hd .sec-feature .tab-filter { margin-top: 10px; }
#hd .sec-feature .tab-filter button { min-width: 25%; }
#hd .sec-feature .tab-content { margin-top: -10%; }
#hd .sec-feature .tab-content > div { padding-top: 12%; padding-bottom: 9em; position: static; }
#hd .sec-feature .tab-content .hd-bg { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; }
#hd .sec-feature .tab-content figure { border-radius: 16px; position: relative; overflow: hidden; }
#hd .sec-feature .tab-content figure img { width: 100%; }
#hd .sec-feature #pageContent-tab-smart .hd-txt { padding-left: 4%; }
#hd .sec-feature #pageContent-tab-smart .list-feature > li { padding-inline: .25em; }
#hd .sec-feature #pageContent-tab-smart .list-feature img { width: 8em; }
#hd .sec-feature #pageContent-tab-pq .pageContent-swiper-pq { width: 95%; margin-right: 0; margin-left: auto; }
#hd .sec-feature #pageContent-tab-pq .hd-txt { padding-right: 1em; }
#hd .sec-feature #pageContent-tab-pq img { user-select: none; }
#hd .sec-feature #pageContent-tab-pq .hd-frame { background-color: black; border-radius: 16px; padding: 10% 7%; min-height: 16em; }
#hd .sec-feature #pageContent-tab-pq .hd-content { position: absolute; width: 50%; top: 10%; left: 0; }
#hd .sec-feature #pageContent-tab-pq .swiper-pagination { justify-content: center; margin-top: 1.5em; }
#hd .sec-feature #pageContent-tab-pq .swiper-pagination-bullet { width: 3.5em; height: 0.25em; border-radius: 0; margin: 0.3em; background: #afafaf; opacity: 1; position: relative; overflow: hidden; }
#hd .sec-feature #pageContent-tab-pq .swiper-button-prev, #hd .sec-feature #pageContent-tab-pq .swiper-button-next { width: 38px; height: 38px; top: var(--swiper-navigation-top-offset, 55%); }
#hd .sec-feature #pageContent-tab-pq .swiper-button-prev.swiper-button-disabled, #hd .sec-feature #pageContent-tab-pq .swiper-button-next.swiper-button-disabled { opacity: .5; }
#hd .sec-feature #pageContent-tab-pq .swiper-button-prev { left: 39%; }
#hd .sec-feature #pageContent-tab-pq .swiper-button-next { left: calc(39% + 45px); right: auto; }
#hd .sec-feature #pageContent-tab-preview .hd-txt { padding-left: 4%; }

@media screen and (min-width: 3000px) { #hd .sec-feature .hd-w900 { max-width: 1600px; }
  #hd .sec-feature #pageContent-tab-pq .hd-frame { min-height: 14em; }
  #hd .sec-feature #pageContent-tab-pq .swiper-button-prev, #hd .sec-feature #pageContent-tab-pq .swiper-button-next { width: 50px; height: 50px; }
  #hd .sec-feature #pageContent-tab-pq .swiper-button-next { left: calc(39% + 60px); } }
@media screen and (max-width: 1280px) { #hd .sec-feature .tab-content > div { padding-top: 15%; padding-bottom: 7em; } }
@media screen and (max-width: 1024px) { #hd .sec-feature { padding-top: 4em; }
  #hd .sec-feature .tab-content { margin-top: 0; }
  #hd .sec-feature .tab-content > div { padding: 4em 0; }
  #hd .sec-feature #pageContent-tab-pq .pageContent-swiper-pq { width: 100%; }
  #hd .sec-feature #pageContent-tab-pq .swiper-button-prev, #hd .sec-feature #pageContent-tab-pq .swiper-button-next { display: none; } }
@media screen and (max-width: 768px) { #hd .sec-feature #pageContent-tab-smart .hd-txt { width: 100%; padding-left: 0; padding-bottom: 1em; text-align: center; }
  #hd .sec-feature #pageContent-tab-smart .list-feature { justify-content: center; }
  #hd .sec-feature #pageContent-tab-smart .list-feature > li { padding-inline: 1.5em; }
  #hd .sec-feature #pageContent-tab-smart figure { width: 100%; }
  #hd .sec-feature #pageContent-tab-pq .hd-frame { min-height: 13em; }
  #hd .sec-feature #pageContent-tab-preview .hd-txt { width: 100%; padding-left: 0; padding-bottom: 1em; text-align: center; }
  #hd .sec-feature #pageContent-tab-preview figure { width: 100%; } }
@media screen and (max-width: 620px) { #hd .sec-feature #pageContent-tab-smart .list-feature { font-size: 0.875em; }
  #hd .sec-feature #pageContent-tab-smart .list-feature > li { padding-inline: .5em; }
  #hd .sec-feature #pageContent-tab-pq .hd-content { position: relative; width: 100%; text-align: center; }
  #hd .sec-feature #pageContent-tab-pq .pageContent-swiper-pq { max-width: 300px; margin: 0 auto; }
  #hd .sec-feature #pageContent-tab-pq .pageContent-swiper-pq .hd-txt { width: 100%; padding-right: 0; margin: 1em 0; }
  #hd .sec-feature #pageContent-tab-pq .pageContent-swiper-pq figure { width: 100%; } }
@media screen and (max-width: 480px) { #hd .sec-feature { padding-top: 2em; } }
#hd .sec-workflow { padding: 4% 0 6%; overflow: hidden; }
#hd .sec-workflow .tab-filter { margin-top: 0; margin-bottom: 40px; }
#hd .tab-connectivity .hd-txt { padding-left: 3%; }
#hd .tab-connectivity figure { width: 62%; margin-right: -7%; margin-left: auto; position: relative; }
#hd .tab-connectivity figure img { width: 100%; }
#hd .tab-connectivity figure .cover { position: absolute; width: 100%; top: 0; left: 0; }
#hd .tab-connectivity li { position: absolute; text-align: right; font-size: 1em; font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; }
#hd .tab-connectivity li:nth-child(1) { bottom: 84%; left: 43%; }
#hd .tab-connectivity li:nth-child(2) { bottom: 77%; left: 55%; }
#hd .tab-connectivity li:nth-child(3) { top: 75%; right: 73%; }
#hd .tab-connectivity li:nth-child(4) { top: 80%; right: 67%; }
#hd .tab-connectivity li:nth-child(5) { top: 85%; right: 60%; }
#hd .tab-view { position: relative; }
#hd .tab-view figure { margin-left: -5%; margin-right: -2%; position: relative; }
#hd .tab-view figure img { width: 100%; }
#hd .tab-view figure .cover { position: absolute; width: 100%; top: 0; left: 0; }
#hd .tab-view h3 { margin-bottom: 0.75em; }
#hd .tab-view h4 { font-size: 1.75em; font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; color: #424242; }
#hd .tab-view .hd-content { padding-left: 5%; position: relative; z-index: 2; }
#hd .tab-view .hd-content img { width: 15em; margin-left: 0; margin-top: 10px; margin-bottom: 5%; }
#hd .tab-view[aria-current="true"] figure .cover { opacity: 0; animation: fadeInUp 0.4s 0.4s ease 1 forwards; }
#hd .tab-design .hd-container > p { max-width: 57em; margin: 0 auto; }
#hd .tab-design ul { margin-top: 5%; }
#hd .tab-design li { padding: 0 3%; }
#hd .tab-design li:nth-child(1) { width: 30%; }
#hd .tab-design li:nth-child(2) { width: 16%; }
#hd .tab-design li:nth-child(3) { width: 25%; }
#hd .tab-design li:nth-child(4) { width: 29%; }
#hd .tab-design li p { margin-top: 1em; font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.125em; }
#hd .tab-design li img { width: 100%; }
#hd .tab-hood .hd-txt { padding-left: 3%; padding-right: 4%; }
#hd .tab-hood figure { position: relative; }
#hd .tab-hood figure img { width: 100%; }
#hd .tab-hood figure .cover { position: absolute; width: 100%; top: 0; left: 0; }
#hd .tab-hood figure p { width: 18%; position: absolute; font-size: 1em; font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; line-height: 1; bottom: 33%; left: 9.5%; }
#hd .tab-hood[aria-current="true"] figure .cover, #hd .tab-hood[aria-current="true"] figure p { opacity: 0; animation: fadeIn 0.4s 0.4s ease 1 forwards; }

@media screen and (max-width: 1280px) { #hd .tab-connectivity figure { width: 55%; margin-right: 0; }
  #hd .tab-connectivity .hd-txt, #hd .tab-hood .hd-txt { padding-right: 2%; } }
@media screen and (max-width: 1024px) { #hd .tab-connectivity .hd-txt { width: 43%; }
  #hd .tab-view figure { width: 50%; margin-left: 0; margin-right: 0; }
  #hd .tab-view .hd-content { padding-left: 2%; padding-top: 0; }
  #hd .tab-view h4 { font-size: 1.5em; }
  #hd .tab-design li p { font-size: 0.875em; } }
@media screen and (max-width: 768px) { #hd .sec-workflow { padding: 10% 0; }
  #hd .tab-connectivity .hd-container { flex-direction: column; }
  #hd .tab-connectivity .hd-txt, #hd .tab-connectivity figure { width: 100%; padding: 0; margin: 0; }
  #hd .tab-connectivity .hd-txt { margin-bottom: 20px; text-align: center; }
  #hd .tab-view .hd-content { width: 100%; text-align: center; }
  #hd .tab-view .hd-content img { margin-inline: auto; }
  #hd .tab-view figure { width: 100%; margin: 0; }
  #hd .tab-hood .hd-container { flex-direction: column; }
  #hd .tab-hood .hd-txt { width: 100%; padding-top: 0; text-align: center; margin-bottom: 5%; }
  #hd .tab-hood figure { width: 100%; margin: 0; } }
@media screen and (max-width: 620px) { #hd .tab-design li { margin: 5% 0; padding: 0 4%; }
  #hd .tab-design li:nth-child(2) { padding: 0 3.5%; }
  #hd .tab-design li:nth-child(4) { padding: 0 4%; }
  #hd .tab-view h4 { font-size: 1.125em; } }
@media screen and (max-width: 480px) { #hd .sec-workflow { padding: 15% 0; }
  #hd .tab-connectivity li { font-size: .75em; }
  #hd .tab-design li:nth-child(1) { width: 54%; }
  #hd .tab-design li:nth-child(2) { width: 25%; margin-inline: auto; }
  #hd .tab-design li:nth-child(3) { width: 38%; margin-inline: auto; }
  #hd .tab-design li:nth-child(4) { width: 54%; }
  #hd .tab-hood figure p { font-size: 0.75em; } }
#pageContent-green-session { font-size: 16px; 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", "Myriad Pro", "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; }
#pageContent-green-session h3, #pageContent-green-session .h3 { font-family: "Roboto", "Myriad Pro", "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; margin-bottom: .5em; }
#pageContent-green-session p, #pageContent-green-session small, #pageContent-green-session a, #pageContent-green-session li { font-family: "Roboto", "Myriad Pro", "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(1, 1fr); grid-auto-rows: auto; grid-row-gap: 20px; 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; border-left: 2px solid #e6e6e7; margin-left: 2em; position: relative; z-index: 2; }
@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 { padding-block: 0; }
  #pageContent-green-session .feature-container picture { padding: 0; }
  #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%; padding: 2em; } }
@media screen and (max-width: 768px) { #pageContent-green-session .feature-container { display: block; }
  #pageContent-green-session p { font-size: 1em; } }
@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; padding: 1.5em 5%; }
  #pageContent-green-session .feature-container li .content { border: none; border-top: 2px solid #e6e6e7; margin: 1em 0 0; padding: 1em 0 0; }
  #pageContent-green-session .feature-container picture { width: 6em; padding: 0; margin: 0 auto; } }

#hd .sec-adobe { padding: 8% 0; background-color: black; position: relative; overflow: hidden; }
#hd .sec-adobe .hd-bg { width: 100%; position: absolute; top: 0; left: 0; }
#hd .sec-adobe .hd-container { position: relative; z-index: 2; }
#hd .sec-adobe .hd-content { max-width: 44em; margin: 0 auto; text-shadow: 0 0 3px black, 0 0 5px black; }
#hd .sec-adobe .hd-content h2 { margin-bottom: 0.25em; letter-spacing: 0; }
#hd .sec-adobe .hd-content p { margin-bottom: 2em; }
#hd .sec-adobe .hd-content p small { font: inherit; font-size: 0.875em; }
#hd .sec-adobe .hd-btn.btn-gradient { padding: .6em 1.5em; margin: 0; background: white; border-radius: 16px; }
#hd .sec-adobe .hd-btn.btn-gradient span { font-family: "TTNormsProNormal", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; letter-spacing: 0; display: inline-block; color: #c8a780 !important; background-color: #0600fd; background-image: -moz-linear-gradient(90deg, #0600fd, #8a00ff, #d200c6); background-image: -webkit-linear-gradient(90deg, #0600fd, #8a00ff, #d200c6); background-image: linear-gradient(90deg, #0600fd, #8a00ff, #d200c6); background-size: 150% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#hd .sec-adobe .hd-btn.btn-gradient span::selection { background: #131313; color: #c8a780; -webkit-background-clip: unset; -webkit-text-fill-color: #c8a780; }
#hd .sec-adobe .hd-btn.btn-gradient span::-moz-selection { background: #131313; color: #c8a780; -webkit-background-clip: unset; -webkit-text-fill-color: #c8a780; }
#hd .sec-adobe .list-block { max-width: 52em; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; grid-column-gap: 10px; grid-row-gap: 10px; margin: 2.25em auto 0; }
#hd .sec-adobe .list-block > li:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
#hd .sec-adobe .list-block > li:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
#hd .sec-adobe .list-block > li:nth-child(3) { grid-area: 2 / 2 / 3 / 3; }
#hd .sec-adobe .list-block > li:nth-child(1) h3 { margin-bottom: 0.5em; }
#hd .sec-adobe .list-block > li:nth-child(1) .list-icons { max-width: 300px; }
#hd .sec-adobe .list-block > li:nth-child(2) .hd-expand, #hd .sec-adobe .list-block > li:nth-child(3) .hd-expand { background-color: #887159; background-image: -moz-linear-gradient(180deg, #887159, #654231); background-image: -webkit-linear-gradient(180deg, #887159, #654231); background-image: linear-gradient(180deg, #887159, #654231); }
#hd .sec-adobe .list-block > li:nth-child(3) .list-icons { max-width: 240px; }
#hd .sec-adobe .hd-frame { width: 100%; height: 100%; display: inline-flex; flex-direction: column; justify-content: center; padding: 40px 40px 50px 40px; border-radius: 16px; position: relative; z-index: 3; }
#hd .sec-adobe .hd-frame:before { content: ''; display: none; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; position: absolute; inset: 0; margin: -1px; background-color: #dec9a8; background-image: -moz-linear-gradient(45deg, #dec9a8, #ccab81, #493B2B); background-image: -webkit-linear-gradient(45deg, #dec9a8, #ccab81, #493B2B); background-image: linear-gradient(45deg, #dec9a8, #ccab81, #493B2B); z-index: -2; opacity: 0.5; mix-blend-mode: darken; }
#hd .sec-adobe .hd-frame.frame-border:before { display: block; }
#hd .sec-adobe .hd-frame .hd-bg { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.7); background-image: -moz-linear-gradient(275deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); background-image: -webkit-linear-gradient(275deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); background-image: linear-gradient(275deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); background-color: transparent; border-radius: inherit; position: absolute; inset: 0; z-index: -1; }
#hd .sec-adobe h3 { line-height: 1.125; margin-bottom: 0; }
#hd .sec-adobe .list-icons { margin: 1em auto; }
#hd .sec-adobe .list-icons li { padding: 4px; }
#hd .sec-adobe .list-icons img { width: 60px; }
#hd .sec-adobe .list-icons .hd-more { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 59px; height: 58px; border: 1px solid #c8a780; border-radius: 18%; font-family: "TTNormsProRegular", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 0.9em; line-height: .8; color: #dfcaa9; }
#hd .sec-adobe .list-icons .hd-more strong { font-size: 1.25em; }
#hd .sec-adobe button.hd-open, #hd .sec-adobe button.hd-close { width: 44px; height: 44px; border-radius: 50%; position: absolute; bottom: 0; right: 0; margin: 15px 20px; transition: background 0.25s; z-index: 3; }
#hd .sec-adobe button.hd-open span, #hd .sec-adobe button.hd-close span { display: block; width: 32px; height: 32px; border-radius: 50%; background: black; border: 1px solid #c8a780; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-adobe button.hd-open span:before, #hd .sec-adobe button.hd-open span:after, #hd .sec-adobe button.hd-close span:before, #hd .sec-adobe button.hd-close span:after { content: ''; display: block; width: 50%; height: 2px; background: white; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .sec-adobe button.hd-open span:after, #hd .sec-adobe button.hd-close span:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
#hd .sec-adobe button.hd-open:hover, #hd .sec-adobe button.hd-open:focus-visible, #hd .sec-adobe button.hd-close:hover, #hd .sec-adobe button.hd-close:focus-visible { background: rgba(200, 167, 128, 0.25); }
#hd .sec-adobe button.hd-open:hover span, #hd .sec-adobe button.hd-open:focus-visible span, #hd .sec-adobe button.hd-close:hover span, #hd .sec-adobe button.hd-close:focus-visible span { background: #c8a780; }
#hd .sec-adobe button.hd-open:hover span:before, #hd .sec-adobe button.hd-open:hover span:after, #hd .sec-adobe button.hd-open:focus-visible span:before, #hd .sec-adobe button.hd-open:focus-visible span:after, #hd .sec-adobe button.hd-close:hover span:before, #hd .sec-adobe button.hd-close:hover span:after, #hd .sec-adobe button.hd-close:focus-visible span:before, #hd .sec-adobe button.hd-close:focus-visible span:after { background: black; }
#hd .sec-adobe button.hd-close span { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#hd .sec-adobe .hd-expand { display: none; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: inherit; padding: 40px 40px 80px; background-color: #887159; background-image: -moz-linear-gradient(152deg, #887159, #654231); background-image: -webkit-linear-gradient(152deg, #887159, #654231); background-image: linear-gradient(152deg, #887159, #654231); text-align: left; position: absolute; top: 0; left: 0; }
#hd .sec-adobe .hd-expand .hd-scroller { position: relative; overflow-y: auto; }
#hd .sec-adobe .hd-expand .hd-scroller::-webkit-scrollbar { width: 5px; }
#hd .sec-adobe .hd-expand .hd-scroller::-webkit-scrollbar-track { background: #f1f1f1; }
#hd .sec-adobe .hd-expand .hd-scroller::-webkit-scrollbar-thumb { background: #888; }
#hd .sec-adobe .hd-expand .hd-scroller::-webkit-scrollbar-thumb:hover { background: #555; }
#hd .sec-adobe [aria-expanded="true"] + .hd-expand { display: flex; }

@media screen and (min-width: 2560px) { #hd .sec-adobe .list-block > li:nth-child(1) .list-icons { max-width: 400px; }
  #hd .sec-adobe .list-block > li:nth-child(3) .list-icons { max-width: 300px; }
  #hd .sec-adobe .list-icons img { width: 82px; }
  #hd .sec-adobe .list-icons .hd-more { width: 80px; height: 78px; }
  #hd .sec-adobe button.hd-open, #hd .sec-adobe button.hd-close { width: 50px; height: 50px; }
  #hd .sec-adobe button.hd-open span, #hd .sec-adobe button.hd-close span { width: 40px; height: 40px; } }
@media screen and (min-width: 3000px) { #hd .sec-adobe .list-block > li:nth-child(1) .list-icons { max-width: 600px; }
  #hd .sec-adobe .list-block > li:nth-child(3) .list-icons { max-width: 400px; }
  #hd .sec-adobe .list-icons img { width: 120px; }
  #hd .sec-adobe .list-icons .hd-more { width: 116px; height: 114px; }
  #hd .sec-adobe button.hd-open, #hd .sec-adobe button.hd-close { width: 80px; height: 80px; }
  #hd .sec-adobe button.hd-open span, #hd .sec-adobe button.hd-close span { width: 60px; height: 60px; } }
@media screen and (max-width: 1280px) { #hd .sec-adobe { padding-top: 10%; }
  #hd .sec-adobe > .hd-bg { width: 120%; max-width: none !important; margin-left: -10%; }
  #hd .sec-adobe .hd-frame, #hd .sec-adobe .hd-expand { padding: 30px 30px 40px 30px; } }
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 1023px) { #hd .sec-adobe .list-block > li:nth-child(1) .list-icons { max-width: 240px; }
  #hd .sec-adobe .list-block > li:nth-child(3) .list-icons { max-width: 200px; }
  #hd .sec-adobe .list-icons img { width: 50px; }
  #hd .sec-adobe .list-icons .hd-more { width: 49px; height: 48px; font-size: 0.875em; } }
@media screen and (max-width: 768px) { #hd .sec-adobe { padding-top: 18%; }
  #hd .sec-adobe .hd-frame, #hd .sec-adobe .hd-expand { padding: 30px 20px 40px 20px; }
  #hd .sec-adobe button.hd-open, #hd .sec-adobe button.hd-close { margin: 10px 16px; } }
@media screen and (max-width: 620px) { #hd .sec-adobe .list-block { display: block; }
  #hd .sec-adobe .list-block > li { margin: 14px 0; }
  #hd .sec-adobe button.hd-open, #hd .sec-adobe button.hd-close { margin: 4px; } }
@media screen and (max-width: 480px) { #hd .sec-adobe { padding-top: 30%; }
  #hd .sec-adobe > .hd-bg { width: 160%; margin-left: -40%; }
  #hd .sec-adobe .hd-expand p { font-size: 0.875em; } }
#hd .sec-faq { background-color: black; padding: 6em 0 8em; }
#hd .sec-faq .faq-a { display: none; }
#hd .sec-faq .faq-q { position: relative; cursor: pointer; }
#hd .sec-faq .faq-q h3 { cursor: pointer; }
#hd .sec-faq .list-faq > li { position: relative; border-bottom: 1px solid #555; padding: 1.7em 3.5em .7em 1.5em; border-left: 7px solid black; cursor: pointer; }
#hd .sec-faq .list-faq > li span { position: absolute; width: 2em; height: 2em; top: 1.4em; right: .7em; border: 1px solid #c8a780; border-radius: 1em; cursor: pointer; }
#hd .sec-faq .list-faq > li span:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: .8em; height: 2px; background-color: #c8a780; }
#hd .sec-faq .list-faq > li span:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: .8em; width: 2px; background-color: #c8a780; }
#hd .sec-faq .list-faq > li.hd-active { border: 1px solid #c8a780; border-left: 7px solid #c8a780; }
#hd .sec-faq .list-faq > li.hd-active span:after { display: none; }
#hd .sec-faq h3 { font-size: 1.4em; margin-bottom: 0; }
#hd .sec-faq p { padding: 1em 0; }
#hd .sec-faq p strong { font-weight: 400; }
#hd .sec-faq a { color: inherit; text-decoration: underline; }
#hd .sec-faq a:hover, #hd .sec-faq a:focus-visible { color: #c8a780; }
#hd .sec-faq .list-disc { columns: 2; margin-bottom: 10px; }

@media screen and (max-width: 768px) { #hd .sec-faq h3 { font-size: 1.2em; } }
@media screen and (max-width: 620px) { #hd .sec-faq { padding: 60px 0; } }
@media screen and (max-width: 480px) { #hd .sec-faq h3 { font-size: 1.1em; }
  #hd .sec-faq p { font-size: 1em; }
  #hd .sec-faq .list-faq > li { padding: 1.2em 3em 1em 1em; }
  #hd .sec-faq .list-faq > li span { top: .7em; }
  #hd .sec-faq .list-disc { columns: 1; } }


#hd .sec-kvm { position: relative; overflow: hidden }
#hd .sec-kvm figure { position: relative }
#hd .sec-kvm figure img { width: 100%; position: absolute; inset: 0; opacity: 0 }
#hd .sec-kvm figure .hd-base { opacity: 1; position: relative }
#hd .sec-kvm figure .hd-tag {
    font-family: "TTNormsProMedium", "Roboto", "Myriad Pro", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
    font-size: 2.25em;
    letter-spacing: -0.018em;
    position: absolute;
    z-index: 3;
    bottom: 34%;
    left: 66.5%;
}
#hd .sec-kvm figure.is-animated .line-pc { animation: fadeIn 0.4s 0.4s ease 1 both, fadeOut 0.4s 0.8s ease 1 both }
#hd .sec-kvm figure.is-animated .line-laptop {
    -webkit-animation-delay: 0.8s;
    -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: 0.8s;
    -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: 0.8s;
    -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: 0.8s;
    animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
#hd .sec-kvm figure.is-animated .hd-laptop {
    -webkit-animation-delay: 1s;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-name: fadeIn;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: both;
    -moz-animation-delay: 1s;
    -moz-animation-duration: 0.8s;
    -moz-animation-name: fadeIn;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: both;
    -o-animation-delay: 1s;
    -o-animation-duration: 0.8s;
    -o-animation-name: fadeIn;
    -o-animation-timing-function: ease;
    -o-animation-iteration-count: 1;
    -o-animation-fill-mode: both;
    animation-delay: 1s;
    animation-duration: 0.8s;
    animation-name: fadeIn;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}
#hd .sec-kvm .hd-container {
    max-width: 46em;
    padding: 3.5% 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
}
@media screen and (max-width: 1440px) { #hd .sec-kvm figure { width: 120%; margin-left: -10% } }
@media screen and (max-width: 1280px) { #hd .sec-kvm figure { width: 130%; margin-left: -15% } }
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 1023px) {
    #hd .sec-kvm .hd-container { position: relative; padding: 10% 0 4% }
    #hd .sec-kvm figure { margin-top: -20% }
    #hd .sec-kvm figure: after {
        content: '';
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 10%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0);
        background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), #fff);
        background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), #fff);
        background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
        user-select: none;
    }
    #hd .sec-kvm figure .hd-tag { font-size: 2em }
}
@media screen and (max-width: 768px) { #hd .sec-kvm figure .hd-tag { font-size: 3.5vw } }
@media screen and (max-width: 620px) {
    #hd .sec-kvm figure { width: 150%; margin-left: -25% }
    #hd .sec-kvm figure .hd-tag { font-size: 3.5vw }
}
@media screen and (max-width: 480px) { #hd .sec-kvm .hd-container { padding-top: 15% } }

#hd .sec-usbc { padding: 6% 0 0; position: relative; overflow: hidden }
#hd .sec-usbc .hd-content { max-width: 44em; margin: 0 auto 4em; position: relative; z-index: 2 }
#hd .sec-usbc .hd-img-container { width: 100%; margin-top: 5% }
#hd .sec-usbc .hd-chart { width: 26em; max-width: 100%; flex-shrink: 0 }
#hd .sec-usbc .hd-chart img { width: 100% }
#hd .sec-usbc .hd-chart ul { width: 114%; margin: 0 -7% }
#hd .sec-usbc .hd-chart li {
    padding: 0.25em 0.5em;
    font-weight: 500;
    line-height: 1.125;
}
#hd .sec-usbc .hd-chart li:nth-child(3) { padding-left: 5% }
@media screen and (min-width: 3000px) { #hd .sec-usbc .hd-container { max-width: 2200px } }
@media screen and (max-width: 1280px) {
    #hd .sec-usbc .hd-chart { width: 22em }
    #hd .sec-usbc .hd-chart li { font-size: 0.9em }
}
@media screen and (max-width: 1023px) { #hd .sec-usbc .hd-chart { width: 18em } }
@media screen and (max-width: 768px) {
    #hd .sec-usbc { padding: 10% 0 0 }
    #hd .sec-usbc .hd-content { margin-bottom: 2em }
    #hd .sec-usbc .hd-wrapper { flex-direction: column }
    #hd .sec-usbc .hd-chart { margin: 0 auto 2em }
    #hd .sec-usbc .hd-img-container { width: 90%; margin: 0 auto }
}
@media screen and (max-width: 620px) { #hd .sec-usbc .hd-img-container { width: 100% } }
@media screen and (max-width: 480px) {
    #hd .sec-usbc { padding: 15% 0 0 }
    #hd .sec-usbc .hd-chart li { font-size: 0.75em }
}

#hd .sec-connectivity { padding: 6% 0 2%; position: relative; overflow: hidden }
#hd .sec-connectivity .hd-container { position: relative; z-index: 2 }
#hd .sec-connectivity h2 + p { max-width: 45em; margin: 0 auto 4em }
#hd .sec-connectivity ul {
    padding: 3% 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#hd .sec-connectivity ul li { padding: 0 1em }
#hd .sec-connectivity ul img { width: auto; height: 3.5em; margin-bottom: -0.25em }
#hd .sec-connectivity ul p {
    font-size: 0.875em;
    line-height: 1.25;
    font-weight: 500;
}
#hd .sec-connectivity figure { border-radius: 16px; position: relative; overflow: hidden }

@media screen and (max-width: 1280px) { #hd .sec-connectivity h2 + p { margin: 0 auto 2em } }
@media screen and (max-width: 1024px) {
    #hd .sec-connectivity ul li { padding: 0 0.75em }
    #hd .sec-connectivity ul img { height: 2.5em }
}
@media screen and (max-width: 768px) {
    #hd .sec-connectivity { padding: 10% 0 4% }
    #hd .sec-connectivity ul { padding: 2% 0 }
}
@media screen and (max-width: 620px) {
    #hd .sec-connectivity { padding-bottom: 2em }
    #hd .sec-connectivity ul {
        max-width: 20em;
        flex-wrap: wrap;
        padding: 0;
        position: relative;
        margin-bottom: 2em;
    }
    #hd .sec-connectivity ul > li { width: 33.3333%; margin-bottom: 10px }
    #hd .sec-connectivity ul p { font-size: 0.75em }
    #hd .sec-connectivity figure { border-radius: 0 }
    #hd .sec-connectivity figure .hd-bg { border-radius: 16px }
}
@media screen and (max-width: 480px) { #hd .sec-connectivity { padding: 15% 0 6% } }

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