/* Box Sizing */ /* Text Truncate */ /* TRANSITION */ /* TRANSFORM */ /* ANIMATION */ /* GRADIENT */ /* OUTER */ @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); #special-sectionOverview { margin-bottom: 100px; } .width-line-gray { background: none; } /* ---------- RESET ---------- */ #hd { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; background: black; color: white; font-size: 16px; margin: 0; padding: 0; /* ---------- SCREEN READER ---------- */ } #hd * { margin: 0; padding: 0; text-decoration: none; list-style-type: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; word-break: break-word; } #hd * ::selection { background: #1d2124; color: #e0bc94; } #hd * ::-moz-selection { background: #1d2124; color: #e0bc94; } #hd ul, #hd li, #hd figure { margin: 0; padding: 0; } #hd h1, #hd h2, #hd h3, #hd h4, #hd p, #hd a, #hd li { font: inherit; padding: 0; margin: 0; } #hd img { display: block; height: auto; border: none; max-width: 100% !important; margin: 0 auto; } #hd img.lazyload { opacity: 0; -moz-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; } #hd img.lazyload.lazyloaded { height: auto; opacity: 1; } #hd video { max-width: 100%; } #hd button { background: none; border: none; outline: none; appearance: none; -webkit-appearance: none; } #hd .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #hd a:focus-visible, #hd button:focus-visible, #hd input:focus-visible, #hd select:focus-visible, #hd textarea:focus-visible, #hd [role="button"]:focus-visible, #hd [tabindex="0"]:focus-visible { outline: 1px solid #e0bc94; } #hd a:focus:not(:focus-visible), #hd button:focus:not(:focus-visible), #hd input:focus:not(:focus-visible), #hd select:focus:not(:focus-visible), #hd textarea:focus:not(:focus-visible), #hd [role="button"]:focus:not(:focus-visible), #hd [tabindex="0"]:focus:not(:focus-visible) { outline: none; } /* ---------- ANIMATIONS ---------- */ @-webkit-keyframes colorrun { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(359deg); } } @-moz-keyframes colorrun { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(359deg); } } @-ms-keyframes colorrun { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(359deg); } } @-o-keyframes colorrun { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(359deg); } } @keyframes colorrun { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(359deg); } } .hd-colorrun { -webkit-animation-delay: 0s; -webkit-animation-duration: 4s; -webkit-animation-name: colorrun; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 4s; -moz-animation-name: colorrun; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 4s; -o-animation-name: colorrun; -o-animation-timing-function: linear; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 4s; animation-name: colorrun; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: forwards; } @-webkit-keyframes wheel { 0% { filter: hue-rotate(0deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } 100% { filter: hue-rotate(359deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } } @-moz-keyframes wheel { 0% { filter: hue-rotate(0deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } 100% { filter: hue-rotate(359deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } } @-ms-keyframes wheel { 0% { filter: hue-rotate(0deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } 100% { filter: hue-rotate(359deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } } @-o-keyframes wheel { 0% { filter: hue-rotate(0deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } 100% { filter: hue-rotate(359deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } } @keyframes wheel { 0% { filter: hue-rotate(0deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } 100% { filter: hue-rotate(359deg); -moz-transform: rotate3d(0, -15deg, 0); -o-transform: rotate3d(0, -15deg, 0); -ms-transform: rotate3d(0, -15deg, 0); -webkit-transform: rotate3d(0, -15deg, 0); transform: rotate3d(0, -15deg, 0); } } @-webkit-keyframes triggerable { 0% { border-width: 3px; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; } 40% { opacity: .9; } 90%,100% { border-width: 1px; -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); opacity: 0; } } @-moz-keyframes triggerable { 0% { border-width: 3px; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; } 40% { opacity: .9; } 90%,100% { border-width: 1px; -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); opacity: 0; } } @-ms-keyframes triggerable { 0% { border-width: 3px; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; } 40% { opacity: .9; } 90%,100% { border-width: 1px; -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); opacity: 0; } } @-o-keyframes triggerable { 0% { border-width: 3px; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; } 40% { opacity: .9; } 90%,100% { border-width: 1px; -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); opacity: 0; } } @keyframes triggerable { 0% { border-width: 3px; -moz-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -webkit-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); opacity: 1; } 40% { opacity: .9; } 90%,100% { border-width: 1px; -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); 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; } } .fadeIn { -webkit-animation-delay: 0s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeIn; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeIn; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.25s; -o-animation-name: fadeIn; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.25s; animation-name: fadeIn; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: forwards; } .owl-item.fadeOut { -webkit-animation-duration: .1s; animation-duration: .1s; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @-ms-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } } /* ---------- color effect ---------- */ @-webkit-keyframes static { 0% { opacity: 1; } 100% { opacity: 1; } } @-moz-keyframes static { 0% { opacity: 1; } 100% { opacity: 1; } } @-ms-keyframes static { 0% { opacity: 1; } 100% { opacity: 1; } } @-o-keyframes static { 0% { opacity: 1; } 100% { opacity: 1; } } @keyframes static { 0% { opacity: 1; } 100% { opacity: 1; } } @-webkit-keyframes breathing { 0% { opacity: 1; } 70% { opacity: 0; } } @-moz-keyframes breathing { 0% { opacity: 1; } 70% { opacity: 0; } } @-ms-keyframes breathing { 0% { opacity: 1; } 70% { opacity: 0; } } @-o-keyframes breathing { 0% { opacity: 1; } 70% { opacity: 0; } } @keyframes breathing { 0% { opacity: 1; } 70% { opacity: 0; } } @-webkit-keyframes strobing { 0% { opacity: 1; } 50% { opacity: 0; } } @-moz-keyframes strobing { 0% { opacity: 1; } 50% { opacity: 0; } } @-ms-keyframes strobing { 0% { opacity: 1; } 50% { opacity: 0; } } @-o-keyframes strobing { 0% { opacity: 1; } 50% { opacity: 0; } } @keyframes strobing { 0% { opacity: 1; } 50% { opacity: 0; } } @-webkit-keyframes music { 0% { opacity: 1; } 10% { opacity: .3; } 40% { opacity: 1; } 60% { opacity: .3; } 70% { opacity: 1; } 100% { opacity: .3; } } @-moz-keyframes music { 0% { opacity: 1; } 10% { opacity: .3; } 40% { opacity: 1; } 60% { opacity: .3; } 70% { opacity: 1; } 100% { opacity: .3; } } @-ms-keyframes music { 0% { opacity: 1; } 10% { opacity: .3; } 40% { opacity: 1; } 60% { opacity: .3; } 70% { opacity: 1; } 100% { opacity: .3; } } @-o-keyframes music { 0% { opacity: 1; } 10% { opacity: .3; } 40% { opacity: 1; } 60% { opacity: .3; } 70% { opacity: 1; } 100% { opacity: .3; } } @keyframes music { 0% { opacity: 1; } 10% { opacity: .3; } 40% { opacity: 1; } 60% { opacity: .3; } 70% { opacity: 1; } 100% { opacity: .3; } } @-webkit-keyframes cycle { 0% { background-color: red; } 15% { background-color: orange; } 30% { background-color: yellow; } 45% { background-color: #00CB07; } 60% { background-color: #07A9FF; } 75% { background-color: #1044FF; } 90% { background-color: #a12fd9; } 100% { background-color: red; } } @-moz-keyframes cycle { 0% { background-color: red; } 15% { background-color: orange; } 30% { background-color: yellow; } 45% { background-color: #00CB07; } 60% { background-color: #07A9FF; } 75% { background-color: #1044FF; } 90% { background-color: #a12fd9; } 100% { background-color: red; } } @-ms-keyframes cycle { 0% { background-color: red; } 15% { background-color: orange; } 30% { background-color: yellow; } 45% { background-color: #00CB07; } 60% { background-color: #07A9FF; } 75% { background-color: #1044FF; } 90% { background-color: #a12fd9; } 100% { background-color: red; } } @-o-keyframes cycle { 0% { background-color: red; } 15% { background-color: orange; } 30% { background-color: yellow; } 45% { background-color: #00CB07; } 60% { background-color: #07A9FF; } 75% { background-color: #1044FF; } 90% { background-color: #a12fd9; } 100% { background-color: red; } } @keyframes cycle { 0% { background-color: red; } 15% { background-color: orange; } 30% { background-color: yellow; } 45% { background-color: #00CB07; } 60% { background-color: #07A9FF; } 75% { background-color: #1044FF; } 90% { background-color: #a12fd9; } 100% { background-color: red; } } @-webkit-keyframes rainbow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @-moz-keyframes rainbow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @-ms-keyframes rainbow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @-o-keyframes rainbow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @keyframes rainbow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @-webkit-keyframes smart { 0% , 28% { background-color: red; } 30%, 58% { background-color: yellow; } 60%, 88% { background-color: #42ca42; } 90%, 98% { background-color: yellow; } 100% { background-color: red; } } @-moz-keyframes smart { 0% , 28% { background-color: red; } 30%, 58% { background-color: yellow; } 60%, 88% { background-color: #42ca42; } 90%, 98% { background-color: yellow; } 100% { background-color: red; } } @-ms-keyframes smart { 0% , 28% { background-color: red; } 30%, 58% { background-color: yellow; } 60%, 88% { background-color: #42ca42; } 90%, 98% { background-color: yellow; } 100% { background-color: red; } } @-o-keyframes smart { 0% , 28% { background-color: red; } 30%, 58% { background-color: yellow; } 60%, 88% { background-color: #42ca42; } 90%, 98% { background-color: yellow; } 100% { background-color: red; } } @keyframes smart { 0% , 28% { background-color: red; } 30%, 58% { background-color: yellow; } 60%, 88% { background-color: #42ca42; } 90%, 98% { background-color: yellow; } 100% { background-color: red; } } @-webkit-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); } 100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } } @-moz-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); } 100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } } @-ms-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); } 100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } } @-o-keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); } 100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } } @keyframes comet { 0% { z-index: -1; -moz-transform: skewX(68deg) translateX(250%); -o-transform: skewX(68deg) translateX(250%); -ms-transform: skewX(68deg) translateX(250%); -webkit-transform: skewX(68deg) translateX(250%); transform: skewX(68deg) translateX(250%); } 100% { z-index: -1; -moz-transform: skewX(68deg) translateX(-250%); -o-transform: skewX(68deg) translateX(-250%); -ms-transform: skewX(68deg) translateX(-250%); -webkit-transform: skewX(68deg) translateX(-250%); transform: skewX(68deg) translateX(-250%); } } @-webkit-keyframes music { 0% { opacity: 1; } 10% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.3; } 70% { opacity: 1; } 100% { opacity: 0.3; } } @-moz-keyframes music { 0% { opacity: 1; } 10% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.3; } 70% { opacity: 1; } 100% { opacity: 0.3; } } @-ms-keyframes music { 0% { opacity: 1; } 10% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.3; } 70% { opacity: 1; } 100% { opacity: 0.3; } } @-o-keyframes music { 0% { opacity: 1; } 10% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.3; } 70% { opacity: 1; } 100% { opacity: 0.3; } } @keyframes music { 0% { opacity: 1; } 10% { opacity: 0.3; } 40% { opacity: 1; } 60% { opacity: 0.3; } 70% { opacity: 1; } 100% { opacity: 0.3; } } @font-face { font-family: 'TT Norms Pro'; src: url("../fonts/TTNormsW05-Regular.ttf") format("opentype"), url("../fonts/TTNormsW05-Regular.woff"), url("../fonts/TTNormsW05-Regular.woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: url("../fonts/TTNormsW05-Light.ttf") format("opentype"), url("../fonts/TTNormsW05-Light.woff"), url("../fonts/TTNormsW05-Light.woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Norms Pro'; src: url("../fonts/TTNormsW05-Medium.ttf") format("opentype"), url("../fonts/TTNormsW05-Medium.woff"), url("../fonts/TTNormsW05-Medium.woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url("../fonts/HelveticaNowDisplay-Regular.ttf") format("opentype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url("../fonts/HelveticaNowDisplay-Medium.ttf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } #hd { font-size: 16px; } #hd h2 { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 7em; letter-spacing: 0; line-height: 1; color: #ffffff !important; margin-bottom: 0; word-break: normal; word-wrap: normal; } #hd h3 { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 2.875em; font-weight: 500; letter-spacing: .018em; line-height: 1.25; color: #ffffff; margin-bottom: .875em; } #hd h4 { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.25em; font-weight: 500; letter-spacing: .04em; line-height: 1.25; margin-bottom: .25em; color: #ffffff; } #hd h5 { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ffffff; } #hd h6 { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #ffffff; } #hd p, #hd small, #hd a, #hd li { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; } #hd p { font-size: 1.25em; line-height: 1.6; font-weight: 300; } #hd p.color-primary { font-weight: 400; } #hd b { font-weight: bold; } #hd small { font-size: 14px; font-weight: 300; letter-spacing: 0.5px; } #hd .align-center { text-align: center; } #hd .align-left { text-align: left; } #hd .align-italic { font-style: italic; } #hd a.txt-link { display: inline-block; text-decoration: underline; font-weight: 400; margin-top: .5em; } #hd a.txt-link:hover { color: white; } #hd .font-rog { font-family: "ROGFonts", "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; } #hd .color-primary { color: #e0bc94; } #hd .color-adobe { color: #5e11dd; } #hd .color-grey { color: #727272; } #hd .color-gradient { display: inline-block; color: #e0bc94 !important; background-color: #e0bc94; background-image: -moz-linear-gradient(135deg, #e0bc94, #e0bc94, #a06150); background-image: -webkit-linear-gradient(135deg, #e0bc94, #e0bc94, #a06150); background-image: linear-gradient(135deg, #e0bc94, #e0bc94, #a06150); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*ie11 above fixed*/ _:-ms-fullscreen, :root #hd .color-gradient { background: transparent !important; } @media screen and (min-width: 2560px) { #hd { font-size: 20px; } } @media screen and (min-width: 3000px) { #hd { font-size: 28px; } } @media screen and (max-width: 1440px) { #hd p { font-size: 1.125em; } } @media screen and (max-width: 1024px) { #hd { font-size: 14px; } #hd h3 { font-size: 1.5em; } #hd h4 { font-size: 1.125em; } #hd p { font-size: 1em; line-height: 1.66; } } #hd .hd-lightbox { width: 100%; height: 100vh; padding: 20px; position: fixed; top: 0; left: 0; display: none; z-index: 10; } #hd .hd-lightbox .hd-filter { width: 100%; height: 100%; background: black; position: absolute; top: 0; left: 0; } #hd .hd-lightbox .hd-box { width: 100%; height: auto; max-width: 1280px; max-height: 720px; background: black; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); 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: 60px; height: 60px; background: #727272; position: absolute; top: 0; right: 0; cursor: pointer; z-index: 2; } #hd .hd-lightbox .hd-close:hover { background: #e0bc94; } #hd .hd-lightbox .hd-close > span { display: block; width: 24px; height: 2px; background: white; -webkit-border-radius: 1.5px; -moz-border-radius: 1.5px; border-radius: 1.5px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #hd .hd-lightbox .hd-close > span:first-child { -moz-transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } #hd .hd-lightbox .hd-close > span:last-child { -moz-transform: rotateZ(-45deg); -o-transform: rotateZ(-45deg); -ms-transform: rotateZ(-45deg); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } #hd .trigger-play { cursor: pointer; } @media screen and (max-width: 1024px) { #hd .hd-lightbox .hd-close { width: 40px; height: 40px; top: 16px; right: 16px; } #hd .hd-lightbox .hd-close > span { width: 20px; height: 2px; } } #hd .w95 { width: 94%; margin: 0 auto; position: relative; } #hd .hd-w900, #hd .hd-w1200, #hd .hd-w1400 { width: 80%; max-width: 1200px; margin: 0 auto; position: relative; } #hd .hd-w900 { max-width: 900px; } #hd .hd-w1400 { max-width: 1400px; } #hd .hd-col20 { width: 20%; } #hd .hd-col25 { width: 25%; } #hd .hd-col33 { width: 33.3333%; } #hd .hd-col40 { width: 40%; } #hd .hd-col45 { width: 45%; } #hd .hd-col50 { width: 50%; } #hd .hd-col55 { width: 55%; } #hd .hd-col60 { width: 60%; } #hd .hd-col65 { width: 65%; } #hd .hd-col66 { width: 66.6666%; } #hd .hd-col70 { width: 70%; } #hd .hd-col75 { width: 75%; } #hd .hd-col80 { width: 80%; } #hd .hd-col100 { width: 100%; } #hd .ib-top { display: inline-block; vertical-align: top; } #hd .ib-bottom { display: inline-block; vertical-align: bottom; } #hd .flex-wrap { display: flex; flex-wrap: wrap; } #hd .flex-nowrap { display: flex; flex-wrap: nowrap; } #hd .align-items-center { align-items: center; } #hd .align-items-start { align-items: flex-start; } #hd .align-items-end { align-items: flex-end; } #hd .justify-content-center { justify-content: center; } #hd .justify-content-start { justify-content: flex-start; } #hd .justify-content-end { justify-content: flex-end; } #hd .justify-content-between { justify-content: space-between; } #hd .justify-content-around { justify-content: space-around; } #hd .flex-row-reverse { flex-direction: row-reverse; } #hd .mx-auto { margin-left: auto; margin-right: auto; } #hd .hd-d-none { display: none; } #hd .hd-d-ib { display: inline-block; } @media screen and (min-width: 2560px) { #hd .hd-w900 { max-width: 1200px; } #hd .hd-w1200 { max-width: 1600px; } #hd .hd-w1400 { max-width: 1800px; } } @media screen and (min-width: 3000px) { #hd .hd-w900 { max-width: 1600px; } #hd .hd-w1200 { max-width: 2000px; } #hd .hd-w1400 { max-width: 2400px; } } @media screen and (max-width: 1023px) { #hd .hd-w1200, #hd .hd-w1400 { width: 90%; } } @media screen and (max-width: 1023px) { #hd .hd-d-1023-none { display: none; } #hd .hd-d-1023-block { display: block; } #hd .hd-d-1023-inline-block { display: inline-block; } } @media screen and (max-width: 768px) { #hd .hd-d-768-none { display: none; } #hd .hd-d-768-block { display: block; } } @media screen and (max-width: 620px) { #hd .hd-d-620-none { display: none; } #hd .hd-d-620-block { display: block; } } @media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none; } #hd .hd-d-480-block { display: block; } } #hd .hd-nav { position: fixed; z-index: 999999; top: 50%; opacity: 1; -moz-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } #hd .hd-nav.left { left: 48px; } #hd .hd-nav.right { right: 48px; } #hd .hd-nav ul { margin: 0; padding: 0; } #hd .hd-nav ul li { display: block; margin: 12px 0; position: relative; } #hd .hd-nav ul li a span { background: #e0bc94; } #hd .hd-nav ul li .hd-tooltip { color: #e0bc94; } #hd .hd-nav ul li a { display: block; z-index: 1; cursor: pointer; text-decoration: none; } #hd .hd-nav ul li a span { display: block; height: 3.8vh; width: 8px; border-radius: 2px; opacity: .5; z-index: 1; -moz-transform: skew(0deg, 40deg); -o-transform: skew(0deg, 40deg); -ms-transform: skew(0deg, 40deg); -webkit-transform: skew(0deg, 40deg); transform: skew(0deg, 40deg); -moz-transition: opacity 0.1s ease-in-out; -o-transition: opacity 0.1s ease-in-out; -webkit-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } #hd .hd-nav ul li a:hover span, #hd .hd-nav ul li a.active span { opacity: 1; } #hd .hd-nav ul li .hd-tooltip { height: 1.5em; font-size: 14px; font-family: arial, helvetica, sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; display: block; margin: auto 0; opacity: 0; position: absolute; top: 0; bottom: 0; pointer-events: none; } #hd .hd-nav ul li .hd-tooltip.right { right: 20px; } #hd .hd-nav ul li .hd-tooltip .left { left: 20px; } #hd .hd-nav ul li:hover .hd-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; } #hd .hd-nav.fp-show-active a.active + .hd-tooltip { -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in; width: auto; opacity: 1; } #hd .scroll-up { position: fixed; right: 30px; bottom: 30px; width: 45px; height: 45px; text-align: center; cursor: pointer; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 2px solid #a06150; opacity: 0; z-index: 10; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } #hd .scroll-up.hd-show { opacity: 1; } #hd .scroll-up svg { display: block; position: absolute; margin: auto; top: 0; right: 0; bottom: 5px; left: 0; fill: #a06150; -webkit-transform: rotateZ(270deg); -moz-transform: rotateZ(270deg); -ms-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); transform: rotateZ(270deg); } #hd .scroll-up:hover { background-color: #a06150; } #hd .scroll-up:hover svg { fill: white; } @media screen and (max-width: 1024px) { #hd .hd-nav.left { left: 20px; } #hd .hd-nav.right { right: 20px; } } @media screen and (max-width: 768px) { #hd .hd-nav { display: none; } #hd .hd-nav ul li .hd-tooltip { display: none; } } @media screen and (max-width: 480px) { #hd .scroll-up { bottom: 15px; right: 15px; } } #hd .sec-enhancement .hd-tag { padding: 1.25em 1em; margin: 0 0 0 2.5em; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent); background-image: -webkit-linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent); background-image: linear-gradient(180deg, transparent, transparent 0.75em, rgba(0, 0, 0, 0.85) 0.75em, rgba(0, 0, 0, 0.85) 3.75em, transparent 3.75em, transparent); position: relative; overflow: hidden; } #hd .sec-enhancement .hd-tag:before, #hd .sec-enhancement .hd-tag:after { content: ''; display: block; width: 1px; height: calc(100% - .75em + 3px); position: absolute; z-index: 2; } #hd .sec-enhancement .hd-tag:before { top: 0; left: 0; background: #e0bc94; } #hd .sec-enhancement .hd-tag:after { bottom: 0; right: 0; background: #a06150; } #hd .sec-enhancement .hd-tag > span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } #hd .sec-enhancement .hd-tag > span:before, #hd .sec-enhancement .hd-tag > span:after { content: ''; display: block; width: calc(100% - 2px); height: calc(.75em + 1px); border: 1px solid; border-image: linear-gradient(to right, #e0bc94, #a06150) 1 100%; border-image-slice: 1; -moz-transform: skew(45deg, 0deg); -o-transform: skew(45deg, 0deg); -ms-transform: skew(45deg, 0deg); -webkit-transform: skew(45deg, 0deg); transform: skew(45deg, 0deg); position: absolute; } #hd .sec-enhancement .hd-tag > span:before { top: 0; right: 1px; border-left-width: 0; border-bottom-width: 0; border-right: 2px solid #a06150; } #hd .sec-enhancement .hd-tag > span:after { bottom: 0; left: 1px; border-right-width: 0; border-top-width: 0; border-left: 2px solid #e0bc94; } #hd section { min-height: 100vh; padding: 3em 0; background: black; position: relative; z-index: 2; } #hd .hd-col40, #hd .hd-col50, #hd .hd-col75 { padding: 0 15px; } #hd .trigger-video-toggle:hover .vid-control, #hd .trigger-video-toggle:focus .vid-control { opacity: 1; } #hd .trigger-video-toggle .vid-control { cursor: pointer; } #hd .trigger-video-toggle .vid-control:focus { opacity: 1; } #hd .vid-control { width: 10%; max-width: 60px; position: absolute; right: 1em; bottom: 0; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 0; } #hd .vid-control .play { display: none; } #hd .vid-control.hd-active .play { display: block; } #hd .vid-control.hd-active .pause { display: none; } #hd .main-kv { width: 100%; padding-top: 1px; padding-bottom: 0; } #hd .main-kv figure { background: #ccdee6; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #hd .main-kv figure:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background-color: transparent; background-image: -moz-linear-gradient(180deg, transparent, white); background-image: -webkit-linear-gradient(180deg, transparent, white); background-image: linear-gradient(180deg, transparent, white); background-color: transparent; z-index: 2; opacity: 0; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } #hd .main-kv figure img { width: 100%; height: 100%; object-fit: cover; -moz-transition: filter 0.4s ease; -o-transition: filter 0.4s ease; -webkit-transition: filter 0.4s ease; transition: filter 0.4s ease; } #hd .main-kv figure.is-blur:before { opacity: 1; } #hd .main-kv figure.is-blur img { filter: blur(5px); } #hd .main-kv .hd-container { width: 90%; max-width: 1600px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 2; } #hd .main-kv .hd-content { display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; bottom: 0; left: auto; right: 0; margin: auto 0; } #hd .main-kv .kv-title p { font-size: 2.075em; color: #5c3123; font-weight: 400; letter-spacing: 0; text-transform: uppercase; margin-bottom: .25em; } #hd .main-kv .kv-title p strong { font-size: 1.1em; } #hd .main-kv p { color: black; } #hd .main-kv h2 { font-size: 4.1em; font-weight: 400; line-height: 1.25; color: black !important; } #hd .main-kv h2 strong { font-size: 1.075em; font-weight: 500; } #hd .main-kv .kv-intro { opacity: 0; } #hd .main-kv .kv-intro p { font-weight: 400; } #hd .sec-bg { background: black; position: relative; z-index: 2; } #hd .sec-bg .hd-bg { background: black url(../img/bg-enhancement.jpg) center center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } #hd .sec-cooling { display: flex; flex-direction: column; justify-content: center; } #hd .sec-cooling figure .explode-container { width: 100%; height: 0; padding-bottom: 65.923%; position: relative; } #hd .sec-cooling figure .explode-container img { width: 100%; position: absolute; top: 0; left: 0; -moz-transition: transform 0.6s ease-in-out; -o-transition: transform 0.6s ease-in-out; -webkit-transition: transform 0.6s ease-in-out; transition: transform 0.6s ease-in-out; } #hd .sec-cooling figure.is-exploded img:nth-child(1) { -moz-transform: scale(0.8) translate(-20%, -25%); -o-transform: scale(0.8) translate(-20%, -25%); -ms-transform: scale(0.8) translate(-20%, -25%); -webkit-transform: scale(0.8) translate(-20%, -25%); transform: scale(0.8) translate(-20%, -25%); } #hd .sec-cooling figure.is-exploded img:nth-child(2) { -moz-transform: scale(0.8) translate(-10%, -5%); -o-transform: scale(0.8) translate(-10%, -5%); -ms-transform: scale(0.8) translate(-10%, -5%); -webkit-transform: scale(0.8) translate(-10%, -5%); transform: scale(0.8) translate(-10%, -5%); } #hd .sec-cooling figure.is-exploded img:nth-child(3) { -moz-transform: scale(0.8) translate(-5%, 0%); -o-transform: scale(0.8) translate(-5%, 0%); -ms-transform: scale(0.8) translate(-5%, 0%); -webkit-transform: scale(0.8) translate(-5%, 0%); transform: scale(0.8) translate(-5%, 0%); } #hd .sec-cooling figure.is-exploded img:nth-child(4) { -moz-transform: scale(0.8) translate(10%, 25%); -o-transform: scale(0.8) translate(10%, 25%); -ms-transform: scale(0.8) translate(10%, 25%); -webkit-transform: scale(0.8) translate(10%, 25%); transform: scale(0.8) translate(10%, 25%); } #hd .sec-cooling figure.is-exploded img:nth-child(5) { -moz-transform: scale(0.8) translate(20%, 45%); -o-transform: scale(0.8) translate(20%, 45%); -ms-transform: scale(0.8) translate(20%, 45%); -webkit-transform: scale(0.8) translate(20%, 45%); transform: scale(0.8) translate(20%, 45%); } #hd .sec-cooling .hd-content { padding-left: 5%; } #hd .sec-cooling ul { margin: 2em 0; } #hd .sec-cooling li { padding-left: 1.5em; margin-bottom: 2em; position: relative; cursor: pointer; } #hd .sec-cooling li:first-child { position: relative; } #hd .sec-cooling li:first-child:before { content: ''; display: block; width: 1px; height: calc(100% + 2.25em); background: #e0bc94; position: absolute; left: .25em; top: .65em; } #hd .sec-cooling li:not(.hd-active):hover h4 { color: #e0bc94 !important; } #hd .sec-cooling li p { color: #a4a4a4; display: none; } #hd .sec-cooling li.hd-active { cursor: default; } #hd .sec-cooling li.hd-active .hd-dot { box-shadow: 0 0 10px white; -moz-transform: scale(1.75, 1.75); -o-transform: scale(1.75, 1.75); -ms-transform: scale(1.75, 1.75); -webkit-transform: scale(1.75, 1.75); transform: scale(1.75, 1.75); } #hd .sec-cooling li.hd-active h4 { color: #e0bc94; } #hd .sec-cooling li.hd-active p { display: block; -webkit-animation-delay: 0s; -webkit-animation-duration: 0.25s; -webkit-animation-name: fadeInUp; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-delay: 0s; -moz-animation-duration: 0.25s; -moz-animation-name: fadeInUp; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: forwards; -o-animation-delay: 0s; -o-animation-duration: 0.25s; -o-animation-name: fadeInUp; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: forwards; animation-delay: 0s; animation-duration: 0.25s; animation-name: fadeInUp; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: forwards; } #hd .sec-cooling .hd-dot { width: .5em; height: .5em; border-radius: .5em; background: #e0bc94; position: absolute; top: .6em; left: 0; } #hd .sec-enhancement { display: flex; align-items: center; } #hd .sec-enhancement .hd-content figure { max-width: 800px; margin: 0 auto; position: relative; } #hd .sec-enhancement .hd-content img { width: 100%; } #hd .sec-enhancement .hd-content p { margin: 1em auto 2em; } #hd .sec-enhancement figure.trigger-video { cursor: pointer; } #hd .sec-enhancement figure.trigger-video .btn-play { width: 10%; max-width: 80px; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } #hd .sec-enhancement figure.trigger-video:hover .btn-play { opacity: .5; } #hd .sec-enhancement .hd-glow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #hd .sec-enhancement .hd-glow-container li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } #hd .sec-enhancement .hd-glow-container li.hd-active { opacity: 1; } #hd .sec-enhancement .hd-tag-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #hd .sec-enhancement .hd-tag-container li { position: absolute; } #hd .sec-enhancement .hd-tag-container li:nth-child(1) { top: 66%; left: 2%; } #hd .sec-enhancement .hd-tag-container li:nth-child(2) { top: 52%; left: 82%; } #hd .sec-enhancement .hd-tag-container li:nth-child(2) .hd-tag { width: 11.4em; position: absolute; top: 0; right: 0; } #hd .sec-enhancement .hd-tag-container li .hd-tag { opacity: 0; pointer-events: none; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } #hd .sec-enhancement .hd-tag-container li.hd-active .hd-tag { opacity: 1; } #hd .sec-enhancement .hd-trigger-tag { cursor: pointer; position: absolute; left: 0; top: 0; } #hd .sec-enhancement .hd-trigger-tag:before, #hd .sec-enhancement .hd-trigger-tag:after { content: ''; display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #e0bc94; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #hd .sec-enhancement .hd-trigger-tag:before { -webkit-animation-delay: -1s; -webkit-animation-duration: 2s; -webkit-animation-name: triggerable; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -1s; -moz-animation-duration: 2s; -moz-animation-name: triggerable; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -1s; -o-animation-duration: 2s; -o-animation-name: triggerable; -o-animation-timing-function: ease-out; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -1s; animation-duration: 2s; animation-name: triggerable; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-fill-mode: forwards; } #hd .sec-enhancement .hd-trigger-tag:after { -webkit-animation-delay: -2s; -webkit-animation-duration: 2s; -webkit-animation-name: triggerable; -webkit-animation-timing-function: ease-out; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; -moz-animation-delay: -2s; -moz-animation-duration: 2s; -moz-animation-name: triggerable; -moz-animation-timing-function: ease-out; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: forwards; -o-animation-delay: -2s; -o-animation-duration: 2s; -o-animation-name: triggerable; -o-animation-timing-function: ease-out; -o-animation-iteration-count: infinite; -o-animation-fill-mode: forwards; animation-delay: -2s; animation-duration: 2s; animation-name: triggerable; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-fill-mode: forwards; } #hd .sec-enhancement .hd-tag { padding: .5em 0; background: none; z-index: 2; } #hd .sec-enhancement .hd-tag span:before, #hd .sec-enhancement .hd-tag span:after { background: rgba(0, 0, 0, 0.85); } #hd .sec-enhancement .hd-tag p { font-family: "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.125em; font-weight: 500; padding: 0 1em; margin: 0; position: relative; } #hd .sec-enhancement .hd-tag p:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.85); z-index: -1; } #hd .sec-enhancement .hd-hover { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } #hd .sec-enhancement .hd-hover:hover { opacity: 1; } #hd .sec-enhancement .owl-nav { width: 100%; height: 2em; position: absolute; top: 0; bottom: 0; margin: auto 0; pointer-events: none; } #hd .sec-enhancement .owl-nav .owl-prev, #hd .sec-enhancement .owl-nav .owl-next { width: 2em; height: 2em; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; pointer-events: all; opacity: 0.8; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } #hd .sec-enhancement .owl-nav .owl-prev.disabled, #hd .sec-enhancement .owl-nav .owl-next.disabled { opacity: 0; pointer-events: none; } #hd .sec-enhancement .owl-nav .owl-prev:hover, #hd .sec-enhancement .owl-nav .owl-next:hover { opacity: 1; } #hd .sec-enhancement .owl-nav .owl-prev:focus-visible, #hd .sec-enhancement .owl-nav .owl-next:focus-visible { outline: 1px solid white; outline-offset: 2px; } #hd .sec-enhancement .owl-nav .owl-prev { right: 100%; border-left: 3px solid #e0bc94; border-bottom: 3px solid #e0bc94; } #hd .sec-enhancement .owl-nav .owl-next { left: 100%; border-top: 3px solid #a06150; border-right: 3px solid #a06150; } #hd .sec-enhancement .flex-direction { display: flex; flex-direction: column-reverse; } #hd .sec-enhancement .hd-filter li { padding: 2em .5em 1em; margin: 0 1em; position: relative; cursor: pointer; } #hd .sec-enhancement .hd-filter li:before { content: ''; display: block; width: 100%; height: 6px; border-radius: 4px; background: #e0bc94; opacity: .2; position: absolute; top: 0; left: 0; } #hd .sec-enhancement .hd-filter li.hd-active:before { opacity: 1; } #hd .sec-enhancement .hd-filter li.hd-active h4 { font-weight: 600; color: #e0bc94 !important; background-color: #e0bc94; background-image: -moz-linear-gradient(90deg, #e0bc94, #e0bc94, #a06150); background-image: -webkit-linear-gradient(90deg, #e0bc94, #e0bc94, #a06150); background-image: linear-gradient(90deg, #e0bc94, #e0bc94, #a06150); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #hd .sec-enhancement .hd-filter h4 { display: inline-block; opacity: 1; } #hd .sec-software { padding-top: 5em; } #hd .sec-software .hd-bg { opacity: .8; } #hd .sec-software .hd-container { margin: 2em auto; } #hd .sec-software figure { margin-top: 1.5em; } #hd .sec-software ul { margin: 3.5em 0 0; } #hd .sec-software ul li { padding: 0 1em; } #hd .sec-software ul img { width: 70%; max-width: 200px !important; margin-bottom: 1.25em; } #hd .sec-software ul p { font-size: 1em; margin-bottom: 1em; } #hd .sec-software ul a { font-size: 1em; font-weight: bold; } #hd .sec-software ul a:after { content: ''; display: inline-block; vertical-align: middle; width: 1.5em; height: 1.5em; background: url(../img/ic_arrow@2x.png) center center no-repeat; background-size: contain; margin-top: -.25em; } #hd .sec-adobe { display: flex; flex-direction: column; justify-content: center; padding: 8em 0; background: white; color: black; } #hd .sec-adobe h3 { font-family: "Helvetica", "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 2.5em; color: black !important; margin-bottom: .5em; } #hd .sec-adobe p { font-family: "Helvetica", "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.125em; line-height: 1.125; } #hd .sec-adobe .hd-bg { width: 100%; margin: -8% 0 -8.5%; } #hd .sec-adobe .list-feature li { padding: 0 1em; margin-bottom: 3em; } #hd .sec-adobe .list-feature h4 { font-family: "Helvetica", "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.5em; line-height: 1; letter-spacing: 0; margin-bottom: .125em; } #hd .sec-adobe .hd-btn { font-family: "Helvetica", "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; font-size: 1.25em; padding: .5em 2em; margin: .25em 1em; background: #25282f; color: white; } #hd .sec-adobe .hd-btn:hover { filter: brightness(120%); } #hd .sec-adobe .hd-btn.btn-adobe { background: #5e11dd; } #hd .sec-adobe .hd-btn.btn-adobe:hover { filter: brightness(120%); } #hd .sec-adobe small { font-family: "Helvetica", "TT Norms Pro", "Roboto", "Segoe UI", "Arial", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif; } #hd .sec-nvidia { min-height: 0; padding-right: 50px; padding-bottom: 6em; } #hd .sec-nvidia .owl-item { height: 0; } #hd .sec-nvidia .owl-item.active { height: auto; } #hd .sec-nvidia .hd-item figure { max-width: 300px; margin: 0 auto; } #hd .sec-nvidia .hd-item .hd-content { padding-left: 2.5em; } #hd .sec-nvidia .hd-item .hd-content h3 { font-size: 1.5em; } #hd .sec-nvidia .hd-item .hd-content p { font-size: 16px; } #hd .sec-nvidia .owl-nav { width: 100%; height: 3.75em; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; z-index: 2; pointer-events: none; } #hd .sec-nvidia .owl-nav .owl-prev, #hd .sec-nvidia .owl-nav .owl-next { pointer-events: all; width: 3.75em; height: 3.75em; background: url(../img/arrow.svg); position: absolute; top: 0; } #hd .sec-nvidia .owl-nav .owl-prev:focus-visible, #hd .sec-nvidia .owl-nav .owl-next:focus-visible { outline: 1px solid white; outline-offset: 2px; } #hd .sec-nvidia .owl-nav .owl-prev { -moz-transform: scale(-1, 1); -o-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); right: calc(100% + 1.5em); } #hd .sec-nvidia .owl-nav .owl-next { left: calc(100% + 1.5em); } #hd .sec-nvidia .owl-dots { width: 100%; position: absolute; top: 100%; left: 0; right: 0; margin: 2em auto 0; text-align: center; } #hd .sec-nvidia .owl-dots .owl-dot { display: inline-block; vertical-align: top; width: 1em; height: 1em; border-radius: 50%; margin: 5px; background: #4b4b4b; } #hd .sec-nvidia .owl-dots .owl-dot.active { background: #e0bc94; } #hd .sec-nvidia .owl-dots .owl-dot:focus-visible { outline: 1px solid white; outline-offset: 2px; } #hd .hd-footnotes { font-size: 12px; padding: 100px 5%; position: relative; } #hd .hd-footnotes li { margin-bottom: .5em; list-style-position: outside; } #hd .hd-footnotes ol { padding-left: 10px; } #hd .hd-footnotes ol li { list-style-type: decimal; } #hd .hd-footnotes ul { padding-left: 10px; } #hd .hd-footnotes ul li { list-style-type: disc; } @media screen and (min-width: 2560px) { #hd .main-kv .hd-container { max-width: 2000px; } #hd .sec-enhancement .hd-content figure { max-width: 1000px; } #hd .sec-software ul img { max-width: 240px !important; } } @media screen and (min-width: 3000px) { #hd .main-kv .hd-container { max-width: 2700px; } #hd .sec-enhancement .hd-content figure { max-width: 1400px; } #hd .sec-software ul img { max-width: 300px !important; } } @media screen and (max-width: 1720px) { #hd .main-kv .kv-title p { font-size: 1.65em; } #hd .main-kv .kv-title h2 { font-size: 3.25em; } } @media screen and (max-width: 1440px) { #hd .main-kv .kv-title p { font-size: 1.5em; } #hd .main-kv .kv-title h2 { font-size: 3em; } } @media screen and (max-width: 1280px) { #hd .main-kv .kv-title p { font-size: 1.25em; } #hd .main-kv .kv-title h2 { font-size: 2.5em; } #hd .sec-adobe { padding: 4em 0; } #hd .sec-adobe .hd-bg { margin: -6% 0 -8%; } #hd .sec-adobe .list-feature li { margin-bottom: 1.5em; } } @media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 1023px) { #hd .main-kv { min-height: 0; } #hd .main-kv figure { height: auto; position: relative; overflow: hidden; } #hd .main-kv figure img { max-width: none !important; width: 120%; margin-left: -8%; } #hd .sec-adobe { padding: 4em 0; } #hd .sec-adobe .hd-bg { margin: -2% 0; } } @media screen and (max-width: 1023px) { #hd .hd-col40, #hd .hd-col50, #hd .hd-col75 { padding: 0 10px; } #hd .sec-enhancement .owl-nav .owl-prev { right: auto; left: 0; } #hd .sec-enhancement .owl-nav .owl-next { left: auto; right: 0; } #hd .sec-nvidia { padding-left: 4em; padding-right: calc(4em + 50px); } } @media screen and (max-width: 768px) { #hd .sec-bg .hd-bg { opacity: .5; } #hd .main-kv figure img { width: 230%; margin-left: -13%; } #hd .main-kv .hd-content { width: 100%; top: auto; bottom: 0; margin: 2em auto; } #hd .main-kv .kv-title p { font-size: 3.75vw; } #hd .main-kv .kv-title h2 { font-size: 7.35vw; line-height: 1; } #hd .hd-title-container { margin-top: 70%; } #hd .hd-title-container h2 { font-size: 5em; margin-bottom: .125em; } #hd .hd-title-container p { font-size: 2em; letter-spacing: .3em; padding-left: .5em; } #hd .sec-intro .hd-content { min-height: 0; padding: 3em 0; margin-top: 35%; justify-content: center; text-align: center; } #hd .sec-cooling { min-height: 0; justify-content: flex-start; padding-top: 4em; } #hd .sec-cooling .hd-container { flex-direction: column; } #hd .sec-cooling figure { width: 90%; margin: 0 auto 2em; } #hd .sec-cooling .hd-content { width: 100%; padding: 2em 0; } #hd .sec-cooling li { margin-bottom: 1em; } #hd .sec-cooling li:first-child:before { height: calc(100% + 1.25em); left: .2em; } #hd .sec-software { background: url(../img/bg_software.jpg) center top no-repeat; background-size: contain; } #hd .sec-software .hd-container { flex-direction: column-reverse; margin-bottom: 2em; position: relative; overflow: hidden; } #hd .sec-software .hd-container .hd-content { width: 100%; } #hd .sec-software .hd-container figure { width: 110%; padding: 0; margin: 0 -1em 1em; } #hd .sec-software ul { flex-direction: column; max-width: 600px; margin: 0 auto; } #hd .sec-software ul li { width: 100%; margin: 2em 0; } #hd .sec-adobe { position: relative; overflow: hidden; } #hd .sec-adobe .hd-bg { width: 120%; max-width: none !important; margin-left: -10%; } #hd .sec-nvidia { padding-left: 0; padding-right: 0; } #hd .sec-nvidia .slider-nvidia { margin-bottom: 7em; } #hd .sec-nvidia .owl-nav { top: 100%; bottom: auto; margin: 1em 0 0; } #hd .sec-nvidia .owl-nav .owl-prev { right: auto; left: 0; } #hd .sec-nvidia .owl-nav .owl-next { left: auto; right: 0; } } @media screen and (max-width: 767px) { #hd section { min-height: 0; } } @media screen and (max-width: 620px) { #hd .sec-enhancement .hd-filter { flex-direction: column; max-width: 400px; margin: 0 auto; } #hd .sec-enhancement .hd-filter li { width: 100%; padding: 1em; margin: 1em .5em 0; } #hd .sec-enhancement .hd-filter li:before { height: 4px; top: auto; bottom: 0; } #hd .sec-enhancement .hd-filter h4 { margin-bottom: 0; } #hd .sec-enhancement .hd-content p { width: 100%; } #hd .sec-adobe h3 { font-size: 2em; } #hd .sec-adobe .list-feature { margin-bottom: 2em; } #hd .sec-adobe .list-feature li { width: 100%; } #hd .sec-adobe .hd-btn { margin: .25em; } #hd .sec-nvidia .hd-item figure, #hd .sec-nvidia .hd-item .hd-content { width: 100%; padding: 0; margin-bottom: 1em; } } @media screen and (max-width: 480px) { #hd section { padding: 2em 0; } #hd .main-kv figure img { width: 240%; margin-left: -15%; } #hd .main-kv .kv-title { margin-bottom: 1em; } } /*# sourceMappingURL=hd-style.css.map */