@charset "UTF-8";
@import url(../lib/swiper/swiper-bundle.min.css);
@import url("https://fonts.googleapis.com/css2?family=Overpass&display=swap&text=%E2%80%9C");
.bg-dark { background: #1b1b1b; }

/*  Width and Height */
/*  Box Sizing */
/*  Text Truncate */
/* TRANSITION */
/* TRANSFORM */
/* ANIMATION */
/* GRADIENT */
/* #hd { font-family: "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #747474; 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: #1b1b1b; color: #2e2e2e; }
#hd ::-moz-selection { background: #1b1b1b; color: #2e2e2e; }
#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 #2e2e2e; }
#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% { -moz-transform: scale(0, 1); -o-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-moz-keyframes dotCounter { 0% { -moz-transform: scale(0, 1); -o-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-ms-keyframes dotCounter { 0% { -moz-transform: scale(0, 1); -o-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-o-keyframes dotCounter { 0% { -moz-transform: scale(0, 1); -o-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@keyframes dotCounter { 0% { -moz-transform: scale(0, 1); -o-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); }
  100% { -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } }
@-webkit-keyframes dotHint { 50% { -moz-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-moz-keyframes dotHint { 50% { -moz-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-ms-keyframes dotHint { 50% { -moz-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-o-keyframes dotHint { 50% { -moz-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@keyframes dotHint { 50% { -moz-transform: scale(1.5, 1.5); -o-transform: scale(1.5, 1.5); -ms-transform: scale(1.5, 1.5); -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } }
@-webkit-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-moz-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-ms-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-o-keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@keyframes zoomIn { 0% { -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; }
  100% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } }
@-webkit-keyframes zoomOut { 0% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
  100% { -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@-moz-keyframes zoomOut { 0% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
  100% { -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@-ms-keyframes zoomOut { 0% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
  100% { -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@-o-keyframes zoomOut { 0% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
  100% { -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; } }
@keyframes zoomOut { 0% { -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
  100% { -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6); -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; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-ms-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-o-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-30px); -o-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); }
  100% { opacity: 1; -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } }
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-30px); -o-transform: translateX(-30px); -ms-transform: translateX(-30px); -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-webkit-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(30px); -o-transform: translateX(30px); -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(30px); -o-transform: translateX(30px); -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-ms-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(30px); -o-transform: translateX(30px); -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@-o-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(30px); -o-transform: translateX(30px); -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(30px); -o-transform: translateX(30px); -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(30px); }
  100% { opacity: 1; -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } }
@font-face { font-family: 'MyriadPro'; src: url("../fonts/MyriadPro-Regular.woff"), url("../fonts/MyriadPro-Regular.ttf"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'MyriadPro'; src: url("../fonts/MyriadPro-Light.woff"), url("../fonts/MyriadPro-Light.ttf"); font-weight: 300; font-style: normal; }
@font-face { font-family: 'TradeGothicLTPro'; src: url("../fonts/TTNormsPro-Regular.eot"); src: url("../fonts/TTNormsPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/TTNormsPro-Regular.woff2") format("woff2"), url("../fonts/TTNormsPro-Regular.woff") format("woff"), url("../fonts/TTNormsPro-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'TradeGothicLTPro'; src: url("../fonts/TTNormsPro-Light.eot"); src: url("../fonts/TTNormsPro-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/TTNormsPro-Light.woff2") format("woff2"), url("../fonts/TTNormsPro-Light.woff") format("woff"), url("../fonts/TTNormsPro-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
#hd { font-size: 16px; }
#hd h2, #hd .h2 { font-family: "TradeGothicLTPro", "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 3.75em; font-weight: 300; line-height: 1.25; color: #747474 !important; letter-spacing: 0; margin-bottom: 0; word-break: normal; word-wrap: normal; }
#hd .title-deco { position: relative; }
#hd .title-deco:after { content: ""; display: block; text-align: center; margin: .8em auto; border-top: 1px solid #C5B69E; width: 1em; }
#hd h3, #hd .h3 { font-family: "TradeGothicLTPro", "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 3em; font-weight: 400; line-height: 1; letter-spacing: .018em; color: #747474; margin-bottom: .5em; }
#hd h4, #hd .h4 { font-family: "TradeGothicLTPro", "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.3125em; font-weight: 400; line-height: 1.25; letter-spacing: .018em; margin-bottom: .35em; color: #747474; }
#hd h5, #hd .h5 { font-family: "TradeGothicLTPro", "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.25em; font-weight: 600; letter-spacing: .018em; color: #5D5D5D; margin-bottom: .5em; }
#hd p, #hd small, #hd a, #hd li { font-family: "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
#hd p { font-size: 1em; line-height: 1.5; letter-spacing: .018em; font-weight: 400; }
#hd b, #hd strong { font-weight: bold; }
#hd small { font-size: .875em; font-weight: 400; letter-spacing: .04em; }
#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; }
#hd .hd-underline { text-decoration: underline; }
#hd a.txt-link:hover { color: white; }
#hd .color-primary { color: #2e2e2e !important; }
#hd .color-secondary { color: #2A77CF !important; }
#hd .color-light-grey { color: #d6d6d6 !important; }
#hd .color-grey { color: #aaaaaa !important; }
#hd .color-info { color: #2A77CF !important; }
#hd .color-white { color: white !important; }
#hd .hd-uppercase { text-transform: uppercase; }

@media screen and (min-width: 2560px) { #hd { font-size: 20px; } }
@media screen and (min-width: 3000px) { #hd { font-size: 34px; } }
@media screen and (max-width: 1440px) { #hd h2, #hd .h2 { font-size: 3.5em; }
  #hd h3, #hd .h3 { font-size: 2.5em; }
  #hd p { font-size: 1em; } }
@media screen and (max-width: 1280px) { #hd h2, #hd .h2 { font-size: 3em; }
  #hd h3, #hd .h3 { font-size: 2.25em; }
  #hd h4, #hd .h4 { font-size: 1.25em; }
  #hd h5, #hd .h5 { font-size: 1.125em; } }
@media screen and (max-width: 1024px) { #hd h3, #hd .h3 { font-size: 2em; }
  #hd p { font-size: .875em; line-height: 1.35; } }
@media screen and (max-width: 768px) { #hd h2, #hd .h2 { font-size: 2em; line-height: 1.125; }
  #hd h4, #hd .h4 { font-size: 1em; }
  #hd h5, #hd .h5 { font-size: 1em; } }
@media screen and (max-width: 480px) { #hd h4, #hd .h4 { font-size: 1em; } }
#hd .hd-w1100, #hd .hd-w1200, #hd .hd-w1300, #hd .hd-w1600 { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; }
#hd .hd-w1100 { max-width: 1100px; }
#hd .hd-w1300 { max-width: 1300px; }
#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-none { display: none !important; }

@media screen and (min-width: 2560px) { #hd .hd-w1100 { max-width: 1400px; }
  #hd .hd-w1200 { max-width: 1500px; }
  #hd .hd-w1300 { max-width: 1600px; }
  #hd .hd-w1600 { max-width: 2000px; } }
@media screen and (min-width: 3000px) { #hd .hd-w1100 { max-width: 2000px; }
  #hd .hd-w1200 { max-width: 2200px; }
  #hd .hd-w1300 { max-width: 2400px; }
  #hd .hd-w1600 { max-width: 2800px; } }
@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; } }
@media screen and (max-width: 480px) { #hd .hd-d-480-none { display: none !important; }
  #hd .hd-d-480-block { display: block !important; } }
#hd .vid-container { width: 100%; height: 0; padding-bottom: 56.25%; background: #747474; 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 { width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -moz-transition: opacity 0.25s ease; -o-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; }
#hd .vid-container h2 { opacity: 0; }
#hd .vid-control { width: 80px; height: 80px; background: none; border: none; box-shadow: none; position: absolute; right: 0; 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; z-index: 2; }
#hd .vid-control svg { width: 100%; height: 100%; }
#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 .vid-control { width: 50px; height: 50px; } }
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: 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%); 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 { -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-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 .bg-white { background: white; color: #747474; }
#hd .bg-primary { background: #F3F0EA; color: #5D5D5D; }
#hd .hd-dot { width: 3vw; height: 3vw; border-radius: 50%; margin: -1.5vw; opacity: .8; position: absolute; z-index: 2; }
#hd .hd-dot.dot-primary { background: #C5B69E; }
#hd .hd-dot.dot-secondary { background: #719ED2; }
#hd .is-animated .hd-dot { -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: dotHint; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 2; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 2s; -moz-animation-name: dotHint; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 2; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 2s; -o-animation-name: dotHint; -o-animation-timing-function: ease; -o-animation-iteration-count: 2; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 2s; animation-name: dotHint; animation-timing-function: ease; animation-iteration-count: 2; animation-fill-mode: both; }
#hd figure:hover .hd-dot { -webkit-animation-delay: 0s; -webkit-animation-duration: 2s; -webkit-animation-name: dotHint; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 2s; -moz-animation-name: dotHint; -moz-animation-timing-function: ease; -moz-animation-iteration-count: infinite; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 2s; -o-animation-name: dotHint; -o-animation-timing-function: ease; -o-animation-iteration-count: infinite; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 2s; animation-name: dotHint; animation-timing-function: ease; animation-iteration-count: infinite; animation-fill-mode: both; }

@media screen and (max-width: 620px) { #hd .hd-dot { width: 10vw; height: 10vw; margin: -5vw; } }
#hd .hd-nav { font-size: 14px; position: fixed; z-index: 9; top: 50%; right: 56px; 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 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; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -moz-transition: transform 0.1s ease-in-out, background 0.6s ease; -o-transition: transform 0.1s ease-in-out, background 0.6s ease; -webkit-transition: transform 0.1s ease-in-out, background 0.6s ease; transition: transform 0.1s ease-in-out, background 0.6s ease; }
#hd .hd-nav ul li a:hover span { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background: white; }
#hd .hd-nav ul li a.hd-active span { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -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: "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 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; -moz-transform: translate(10px, 0); -o-transform: translate(10px, 0); -ms-transform: translate(10px, 0); -webkit-transform: translate(10px, 0); transform: translate(10px, 0); }
#hd .hd-nav ul li:hover .hd-tooltip { width: auto; opacity: 1; -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); -moz-transition: opacity 0.2s ease-in, transform 0.4s ease; -o-transition: opacity 0.2s ease-in, transform 0.4s ease; -webkit-transition: opacity 0.2s ease-in, transform 0.4s ease; 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 #2e2e2e; -moz-transition: opacity 0.4s ease; -o-transition: opacity 0.4s ease; -webkit-transition: opacity 0.4s ease; 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: #2e2e2e; -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); }
#hd .scroll-up:hover { background-color: #2e2e2e; }
#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: "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; font-size: 1.25em; letter-spacing: 0; color: #2e2e2e; background: white; padding: .45em 1.25em; border-radius: 2em; margin: 1.25em; position: relative; z-index: 2; cursor: pointer; -moz-transition: background 0.4s ease, transform 0.25s ease; -o-transition: background 0.4s ease, transform 0.25s ease; -webkit-transition: background 0.4s ease, transform 0.25s ease; transition: background 0.4s ease, transform 0.25s ease; }
#hd .hd-btn:hover, #hd .hd-btn:focus-visible { color: white; background: #2e2e2e; }
#hd .hd-btn.hd-btn-frame { border: 1px solid #2e2e2e; color: #2e2e2e; background: white; -moz-transition: background 0.4s ease, transform 0.25s ease; -o-transition: background 0.4s ease, transform 0.25s ease; -webkit-transition: background 0.4s ease, transform 0.25s ease; transition: background 0.4s ease, transform 0.25s ease; }
#hd .hd-btn.hd-btn-frame:hover, #hd .hd-btn.hd-btn-frame:focus-visible { color: white; background: #2e2e2e; }

@media screen and (max-width: 1024px) { #hd .hd-btn { font-size: 1.125em; margin: 1em; } }
@media screen and (max-width: 620px) { #hd .hd-btn { font-size: 1em; margin: .5em; } }
#hd .hd-icon-plus { display: inline-block; vertical-align: top; width: 1.25em; height: 1.25em; border-radius: 1em; border: 1px solid #2e2e2e; margin: .125em .5em -.125em 0; position: relative; }
#hd .hd-icon-plus:before, #hd .hd-icon-plus:after { content: ''; display: block; width: .65em; height: 1px; background: #2e2e2e; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
#hd .hd-icon-plus:after { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
#hd .hd-active > .hd-icon-plus:after { -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); }

#hd .swiper-container { position: relative; padding-bottom: 50px;}
#hd .swiper-button-prev, #hd .swiper-button-next { display: none; width: 3.875em; height: 3.875em; color: #2e2e2e; border-radius: 50%; margin: 0 0 3em; -moz-transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); opacity: 1; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }
#hd .swiper-button-prev:after, #hd .swiper-button-next:after { font-size: 2.25em; font-weight: bold; }
#hd .swiper-button-prev:hover, #hd .swiper-button-prev:focus-visible, #hd .swiper-button-next:hover, #hd .swiper-button-next:focus-visible { background: white; }
#hd .swiper-button-prev:active, #hd .swiper-button-next:active { -moz-transform: translateY(-50%) scale(0.9); -o-transform: translateY(-50%) scale(0.9); -ms-transform: translateY(-50%) scale(0.9); -webkit-transform: translateY(-50%) scale(0.9); transform: translateY(-50%) scale(0.9); }
#hd .swiper-button-prev.swiper-button-disabled, #hd .swiper-button-next.swiper-button-disabled { opacity: 0; pointer-events: none; }
#hd .swiper-button-prev:after { margin-right: .125em; }
#hd .swiper-button-next:after { margin-left: .125em; }
#hd .swiper-controls { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto .5em; }
#hd .swiper-pagination { display: flex; flex-wrap: wrap; align-items: center; margin-right: .5em; position: relative; }
#hd .swiper-pagination-bullet { width: 3em; height: 5px; border-radius: 5px; overflow: hidden; margin: 0 .5em; background: #d6d6d6; opacity: 1; position: relative; }
#hd .swiper-pagination-bullet.swiper-pagination-bullet-active:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #2e2e2e; transform-origin: 0 0; -webkit-animation-delay: 0s; -webkit-animation-duration: 3.6s; -webkit-animation-name: dotCounter; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 3.6s; -moz-animation-name: dotCounter; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 3.6s; -o-animation-name: dotCounter; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 3.6s; animation-name: dotCounter; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .swiper-controls.is-paused .swiper-pagination-bullet:after { animation-play-state: paused; }
#hd .swiper-controls.is-paused .hd-play { display: block; }
#hd .swiper-controls.is-paused .hd-pause { display: none; }
#hd .swiper-control { flex-shrink: 0; position: relative; z-index: 2; }
#hd .swiper-control .hd-play, #hd .swiper-control .hd-pause { font-size: 1em; width: 2em; height: 2em; position: relative; }
#hd .swiper-control .hd-play { display: none; }
#hd .swiper-control .hd-play:before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: .5em 0 .5em .75em; border-color: transparent transparent transparent #2e2e2e; 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%); }
#hd .swiper-control .hd-pause:before, #hd .swiper-control .hd-pause:after { content: ''; border-radius: 5px; width: .35em; height: .975em; background: #2e2e2e; 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%); }
#hd .swiper-control .hd-pause:before { margin-left: -.5em; }

@media screen and (max-width: 1024px) { #hd .swiper-button-prev, #hd .swiper-button-next { width: 3.5em; height: 3.5em; }
  #hd .swiper-button-prev:after, #hd .swiper-button-next:after { font-size: 2em; } }
@media screen and (max-width: 768px) { #hd .swiper-button-prev, #hd .swiper-button-next { width: 3.14em; height: 3.14em; margin: 0; }
  #hd .swiper-button-prev:after, #hd .swiper-button-next:after { font-size: 2em; }
  #hd .swiper-controls { position: relative; margin: .5em 0; } }
@media screen and (max-width: 480px) { #hd .swiper-button-prev, #hd .swiper-button-next { display: none; } }
#hd .main-tab-container { padding-bottom: 1em; position: sticky; top: 0; z-index: 5; }
#hd .main-tab { padding-top: 1em; background: #fafafa; position: relative; overflow: hidden; }
#hd .main-tab li { display: flex; align-items: flex-end; justify-content: center; width: calc(50% - .5em); max-width: 36em; cursor: pointer; }
#hd .main-tab li.hd-active { background: #F3F0EA; box-shadow: 0 0 0.5em rgba(137, 115, 82, 0.5); border-top-right-radius: .5em; border-top-left-radius: .5em; cursor: default; }
#hd .main-tab li.hd-active h2 { color: #80694D !important; }
#hd .main-tab li.hd-active h2:after { background: #80694D; opacity: 1; -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); }
#hd .main-tab h2 { display: inline-block; font-size: 1.5em; font-weight: 400; color: #6B6B6B !important; padding: .75em 1em .25em; margin-bottom: .5em; position: relative; }
#hd .main-tab h2:after { content: ''; display: block; width: 100%; height: 2px; background: #6B6B6B; position: absolute; left: 0; bottom: 0; opacity: .35; -moz-transform: scale(0.5, 1); -o-transform: scale(0.5, 1); -ms-transform: scale(0.5, 1); -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); -moz-transition: transform 0.25s ease; -o-transition: transform 0.25s ease; -webkit-transition: transform 0.25s ease; transition: transform 0.25s ease; }
#hd .main-content { padding: 1em; }
/* #hd .sec-kv { background: #fafafa; } */
#hd .sec-awards { padding: 8em 0; }
#hd .sec-awards img { width: 55%; margin: 0 auto 1em; }
#hd .sec-awards li { display: flex; flex-direction: column; padding: 0 1em; }
#hd .sec-awards h3 { min-height: 2.5em; }
#hd .sec-awards blockquote { display: block; padding: 0 1em; margin-bottom: 1em; position: relative; z-index: 2; }
#hd .sec-awards blockquote:before { content: "“"; font-family: "Overpass", "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 4em; color: #2e2e2e; opacity: .4; position: absolute; top: -.25em; right: 100%; z-index: -1; }
#hd .sec-awards .hd-cite { font-family: "TradeGothicLTPro", "MyriadPro", "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans TC", "Microsoft Jhenghei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 1.125em; font-style: normal; letter-spacing: .018em; margin-top: auto; }
#hd .sec-intro { padding: 4em 0; }
#hd .sec-intro .btn-container { margin-top: 3em; }
#hd .sec-video { padding-bottom: 6.25em; }
#hd .sec-video .hd-container { clip-path: inset(10%); position: relative; -moz-transition: clip-path 0.8s ease; -o-transition: clip-path 0.8s ease; -webkit-transition: clip-path 0.8s ease; transition: clip-path 0.8s ease; }
#hd .sec-video.is-animated .hd-container { clip-path: inset(0); }
#hd .sec-video .hd-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2em; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1), 0 0 1em rgba(0, 0, 0, 0.1), 0 0 2em rgba(0, 0, 0, 0.25); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; -moz-transition: padding 0.25s ease; -o-transition: padding 0.25s ease; -webkit-transition: padding 0.25s ease; transition: padding 0.25s ease; cursor: pointer; }
#hd .sec-video .hd-content:hover { padding: 4em; }
#hd .sec-video .hd-content .hd-btn { margin-bottom: 0; }
#hd .sec-connection { padding: 3.5em 0 5em; }
#hd .sec-connection li { padding: 0 1em; }
#hd .sec-connection li:nth-child(1) .hd-dot { top: 48%; left: 50%; }
#hd .sec-connection li:nth-child(2) .dot-secondary { top: 67%; left: 28%; }
#hd .sec-connection li:nth-child(2) .dot-primary { top: 67%; left: 76%; }
#hd .sec-connection li:nth-child(3) .hd-dot { top: 80%; left: 30%; }
#hd .sec-connection figure { margin-bottom: 1.5em; position: relative; }
#hd .sec-life { padding: 3.5em 0 6.25em; }
#hd .sec-life figure { margin-bottom: 3em; position: relative; overflow: hidden; }
#hd .sec-security { padding: 6.25em 0; }
#hd .sec-security figure { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
#hd .sec-security figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 35% top; object-position: 35% top; }
#hd .sec-security .hd-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12.5em 1em; background: rgba(58, 109, 166, 0.9); position: relative; z-index: 2; }
#hd .sec-security p { max-width: 40em; margin-bottom: 3em; }
#hd .sec-security ul { width: 80%; max-width: 64em; margin: 0 auto 2em; }
#hd .sec-security li { padding: 0 2em; }
#hd .sec-security li img { min-height: 8.125em; margin-bottom: 1em; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; }
#hd .sec-security .hd-btn { margin-bottom: 0; }
#hd .sec-naming { padding: 6.25em 0; }
#hd .sec-naming .hd-col25, #hd .sec-naming .hd-col75 { padding: 0 1.25em; }
#hd .sec-naming li { line-height: 1.25; letter-spacing: .04em; padding: 1em 0; color: #2e2e2e; margin-right: 2em; }
#hd .sec-naming li:before { content: ''; display: inline-block; vertical-align: middle; width: 1.5em; height: 1.5em; border-radius: 2em; margin-top: -.25em; margin-right: .3em; background: #C5B69E; }
#hd .sec-naming li:first-child { color: #2A77CF; }
#hd .sec-naming li:first-child:before { background: #719ED2; }
#hd .sec-naming figure { position: relative; margin: .5em 0 1.5em; }
#hd .sec-naming .dot-secondary { top: 53%; left: 28%; -webkit-animation-delay: 0.95s; -moz-animation-delay: 0.95s; -ms-animation-delay: 0.95s; -o-animation-delay: 0.95s; animation-delay: 0.95s; animation-delay: .95s !important; }
#hd .sec-naming .dot-primary { top: 33%; left: 95%; }
#hd .sec-design { padding: 6.25em 0; }
#hd .sec-design .swiper-slide { opacity: .3; -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-design .swiper-slide.swiper-slide-active { opacity: 1; }
#hd .sec-design .swiper-button-prev, #hd .sec-design .swiper-button-next { top: 0; width: 18%; height: 100%; border-radius: 0; margin: 0; -moz-transform: none; -o-transform: none; -ms-transform: none; -webkit-transform: none; transform: none; opacity: 0 !important; z-index: 2; }
#hd .sec-design .swiper-button-prev:after, #hd .sec-design .swiper-button-next:after { display: none; }
#hd .sec-design .swiper-button-prev { left: 0; }
#hd .sec-design .swiper-button-next { right: 0; }
#hd .sec-design .swiper-controls { position: relative; }
#hd .sec-design .swiper-pagination-bullet.swiper-pagination-bullet-active:after { -webkit-animation-delay: 0s; -webkit-animation-duration: 5.3s; -webkit-animation-name: dotCounter; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 5.3s; -moz-animation-name: dotCounter; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 5.3s; -o-animation-name: dotCounter; -o-animation-timing-function: linear; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 5.3s; animation-name: dotCounter; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-design h3 { color: #5D5D5D; font-size: 1.625em; font-weight: bold; margin-top: 1em; }
#hd #pageContent-panel-network .sec-video .hd-content { background: rgba(0, 0, 0, 0.7); }
#hd .sec-create { padding: 6.25em 0; }
#hd .sec-create .hd-container > p { margin: 0 auto 3em; }
#hd .sec-create h3 { margin-bottom: 2em; }
#hd .sec-create h3 small { display: block; margin-top: .5em; }
#hd .sec-create figure { padding: 0 1em; margin-bottom: 2em; position: relative; }
#hd .sec-create .hd-bg { -o-object-fit: contain; object-fit: contain; -o-object-position: center bottom; object-position: center bottom; }
#hd .sec-create .hd-mark { position: absolute; width: 30%; height: 0; padding-bottom: 30%; margin: -15%; background: url(../img/wave.png) center no-repeat; background-size: contain; position: absolute; }
#hd .sec-create .hd-pd { position: absolute; width: 16%; margin: -8%; }
#hd .sec-create li { padding: 0 2.5em; margin-bottom: 2em; }
#hd .sec-create li:nth-child(1) .hd-mark { top: 63%; left: 50%; }
#hd .sec-create li:nth-child(1) .hd-pd { top: 63%; left: 50%; }
#hd .sec-create li:nth-child(2) .mark-1 { top: 50%; left: 30%; }
#hd .sec-create li:nth-child(2) .mark-2 { top: 50%; left: 70%; }
#hd .sec-create li:nth-child(3) .mark-1 { top: 80%; left: 35%; }
#hd .sec-create li:nth-child(3) .mark-2 { top: 40%; left: 80%; }
#hd .sec-create li p { font-size: 1em; }
#hd .sec-create.is-animated .hd-mark { -webkit-animation-delay: 0s; -webkit-animation-duration: 4s; -webkit-animation-name: dotHint; -webkit-animation-timing-function: ease; -webkit-animation-iteration-count: 1; -webkit-animation-fill-mode: both; -moz-animation-delay: 0s; -moz-animation-duration: 4s; -moz-animation-name: dotHint; -moz-animation-timing-function: ease; -moz-animation-iteration-count: 1; -moz-animation-fill-mode: both; -o-animation-delay: 0s; -o-animation-duration: 4s; -o-animation-name: dotHint; -o-animation-timing-function: ease; -o-animation-iteration-count: 1; -o-animation-fill-mode: both; animation-delay: 0s; animation-duration: 4s; animation-name: dotHint; animation-timing-function: ease; animation-iteration-count: 1; animation-fill-mode: both; }
#hd .sec-compatibility { padding: 6.25em 0; }
#hd .sec-compatibility .hd-container > p { margin: 0 auto 1em; }
#hd .sec-compatibility .btn-container { margin-bottom: 2em; }
#hd .sec-compatibility figure { width: 70%; margin: auto auto 2em; }
#hd .sec-compatibility ul { align-items: stretch; }
#hd .sec-compatibility li { display: flex; flex-direction: column; }
#hd .sec-compatibility li:nth-child(1) figure { max-width: 17.75em; }
#hd .sec-compatibility li:nth-child(2) figure, #hd .sec-compatibility li:nth-child(3) figure { max-width: 12em; }
#hd .sec-compatibility img { -o-object-fit: contain; object-fit: contain; -o-object-position: center bottom; object-position: center bottom; }
#hd .sec-compatibility h3 { font-weight: 400; }

@media screen and (max-width: 1440px) { #hd .sec-design h3 { font-size: 1.35em; } }
@media screen and (max-width: 1280px) { #hd .main-tab h2 { font-size: 1.25em; }
  #hd .sec-security .hd-content { padding: 8em 1em; }
  #hd .sec-security li { padding: 0 1em; }
  #hd .sec-security li img { height: 6em; min-height: 0; }
  #hd .sec-design h3 { font-size: 1.25em; } }
@media screen and (max-width: 1024px) { #hd .sec-security .hd-content { padding: 5em 1em; }
  #hd .sec-create li { padding: 0 1.5em; }
  #hd .sec-create li p { font-size: .875em; } }
@media screen and (max-width: 1024px) and (orientation: portrait), screen and (max-width: 1023px) { #hd .sec-video .hd-container { clip-path: inset(0) !important; } }
@media screen and (max-width: 768px) { #hd .main-tab li:nth-child(n) { padding: 0 .5em; }
  #hd .sec-awards { padding: 3em 0 1em; }
  #hd .sec-awards li { width: 100%; max-width: 400px; margin: 0 auto 2em; }
  #hd .sec-awards img { margin-bottom: .5em; }
  #hd .sec-intro { padding: 2em 0; }
  #hd .sec-connection { padding: 2em 0 4em; }
  #hd .sec-connection li { padding: 0 .6em; }
  #hd .sec-security { padding: 2em 0; }
  #hd .sec-security .hd-content { padding: 6.25em 1em; }
  #hd .sec-security ul { width: 100%; }
  #hd .sec-security li img { height: 5em; }
  #hd .sec-naming { padding: 4em 0 2em; }
  #hd .sec-naming .hd-col25, #hd .sec-naming .hd-col75 { padding: 0 1em; }
  #hd .sec-design { padding: 2em 0; }
  #hd .sec-create { padding: 2em 0; }
  #hd .sec-create li { padding: 0 .5em; }
  #hd .sec-compatibility { padding: 2em 0 4em; }
  #hd .sec-compatibility li { display: flex; flex-direction: column; }
  #hd .sec-compatibility li:nth-child(2) figure, #hd .sec-compatibility li:nth-child(3) figure { max-width: 8em; }
  #hd .sec-compatibility img { height: 100px; margin: auto; } }
@media screen and (max-width: 620px) { #hd .main-tab h2 { font-size: 1em; }
  #hd .sec-intro .btn-container { margin-top: 1em; }
  #hd .sec-video .hd-container { width: 100%; }
  #hd .sec-video .hd-content { padding: 1em; }
  #hd .sec-connection li { width: 100%; display: flex; align-items: center; }
  #hd .sec-connection li figure { width: 30%; margin-bottom: 0; }
  #hd .sec-connection li .hd-content { width: 70%; padding-left: 1em; text-align: left; }
  #hd .sec-security ul { width: 90%; max-width: 22em; margin-left: auto; margin-right: auto; }
  #hd .sec-security li { width: 100%; display: flex; align-items: center; margin-bottom: 1em; }
  #hd .sec-security li img { width: 25%; height: auto; margin: 0 0 1em auto; }
  #hd .sec-security li h3 { width: 75%; padding-left: 2em; text-align: left; }
  #hd .sec-life figure img { width: 200%; max-width: none !important; margin-left: -50%; }
  #hd .sec-naming .hd-col25, #hd .sec-naming .hd-col75 { padding: 0 .5em; }
  #hd .sec-naming .hd-col25 { width: 30%; }
  #hd .sec-naming .hd-col75 { width: 70%; }
  #hd .sec-create li { width: 100%; display: flex; align-items: center; }
  #hd .sec-create li .hd-content { width: 40%; }
  #hd .sec-create li p { width: 60%; padding-left: 1em; text-align: left; }
  #hd .sec-create h3 { margin-bottom: .5em; } }
@media screen and (max-width: 480px) { #hd .main-tab-container { padding-bottom: .5em; }
  #hd .main-tab { padding-top: .5em; }
  #hd .main-tab h2 { font-size: .9em; letter-spacing: .018em; padding-left: 0; padding-right: 0; }
  #hd .main-content { padding: .5em; }
  #hd .hd-col33 { width: 100%; padding: 0; margin-bottom: 1em; }
  #hd .sec-video { padding-bottom: 0; }
  #hd .sec-video .h3 { font-size: 1.25em; line-height: 1.5; }
  #hd .sec-connection { padding-bottom: 2em; }
  #hd .sec-life { padding: 2em 0; }
  #hd .sec-naming .hd-col25 { width: 100%; padding: 0; }
  #hd .sec-naming .hd-col25 img { width: 60%; max-width: 12em !important; margin: 0 auto 1em; }
  #hd .sec-naming .hd-col75 { width: 100%; padding: 0; }
  #hd .sec-naming .dot-mark { justify-content: center; }
  #hd .sec-naming .dot-mark li { margin: .5em; }
  #hd .sec-security { padding: 0; }
  #hd .sec-security .hd-container { width: 100%; }
  #hd .sec-security .hd-content { padding: 2em 5%; }
  #hd .sec-naming { padding: 2em 0; }
  #hd .sec-compatibility li { margin-bottom: 2em; }
  #hd .sec-compatibility figure { margin-bottom: 1em; } }
@media screen and (max-width: 375px) { #hd .sec-connection li { flex-direction: column; margin-bottom: 2em; }
  #hd .sec-connection li:last-child { margin-bottom: 0; }
  #hd .sec-connection li figure { width: 100%; margin-bottom: 1em; }
  #hd .sec-connection li .hd-content { width: 100%; padding-left: 0; text-align: center; }
  #hd .sec-create li { flex-direction: column; margin-bottom: 2em; }
  #hd .sec-create li .hd-content { width: 100%; margin-bottom: 1em; }
  #hd .sec-create li figure { margin-bottom: 1em; }
  #hd .sec-create li p { width: 100%; padding-left: 0; text-align: center; } }
/**/
#hd .swiper-controls.is-paused{
      bottom: 2px;
}
/*# sourceMappingURL=hd-style.css.map */