/* 2023-12-26 Jason TSDIB0003-7924 開戶串接 */
/* 2024-04-12 Kevin 套用 20240410 切版 commit 0a126b8540d */
*, *::before, *::after { box-sizing: border-box; }

html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

body { margin: 0; padding: 0; }

[tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; }

hr { box-sizing: content-box; height: 0; overflow: visible; }

h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; }

p { margin-top: 0; margin-bottom: 1rem; }

abbr[title], abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none; }

address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }

ol, ul, dl { margin-top: 0; margin-bottom: 1rem; padding: 0; list-style: none; }

ol ol, ul ul, ol ul, ul ol { margin-bottom: 0; padding: 0; list-style: none; }

dt { font-weight: 700; }

dd { margin-bottom: .5rem; margin-left: 0; }

blockquote { margin: 0 0 1rem; }

b, strong { font-weight: bolder; }

sub, sup { position: relative; line-height: 0; vertical-align: baseline; }

sub { bottom: -.25em; }

sup { top: -.5em; }

a { background-color: transparent; outline: 0; }

a:not([href]):not([class]) { color: inherit; }

pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; }

figure { margin: 0 0 1rem; }

img { vertical-align: middle; border-style: none; }

svg { overflow: hidden; vertical-align: middle; }

table { border-collapse: collapse; }

caption { text-align: left; caption-side: bottom; padding: 0; }

th { text-align: inherit; text-align: -webkit-match-parent; font-weight: bold; }

label { display: inline-block; margin-bottom: .5rem; }

button { border-radius: 0; }

button:focus:not(:focus-visible) { outline: 0; }

input, button, select, optgroup, textarea { margin: 0; font-family: inherit; line-height: inherit; }

button, input { overflow: visible; }

button, select { text-transform: none; }

[role="button"] { cursor: pointer; outline: 0; }

select { word-wrap: normal; }

button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; }

input[type="radio"], input[type="checkbox"] { box-sizing: border-box; padding: 0; }

textarea { overflow: auto; resize: vertical; }

fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }

legend { display: block; width: 100%; max-width: 100%; padding: 0; margin-bottom: .5rem; line-height: inherit; color: inherit; white-space: normal; }

progress { vertical-align: baseline; }

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

[type="search"] { outline-offset: -2px; -webkit-appearance: none; }

[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }

output { display: inline-block; }

summary { display: list-item; cursor: pointer; }

template { display: none; }

[hidden] { display: none !important; }

.products-page #main-header { transform: translateY(0); transition: transform 0.3s linear; }
.products-page #main-header.goUp { transform: translateY(-93px); }
@media (max-width: 991px) { .products-page #main-header.goUp { transform: translateY(-65px); } }
.products-page #main-header.goDown { transform: translateY(0); }

.reg-process #main-header { transform: translateY(0); transition: transform 0.3s linear; }
.reg-process #main-header.goUp { transform: translateY(-93px); }
@media (max-width: 991px) { .reg-process #main-header.goUp { transform: translateY(-65px); } }
.reg-process #main-header.goDown { transform: translateY(0); }

@media (max-width: 991px) { .products-index .btn-open-account, .products-page .btn-open-account, .products-news .btn-open-account { visibility: visible !important; opacity: 1 !important; } }

#main-header { position: fixed; width: 100%; left: 0; top: 0; z-index: 1030; }
#main-header .main-header-content-wrap { transition: background-color 100ms; display: flex; flex-direction: column; }
@media (max-width: 991px) { #main-header .main-header-content-wrap { padding: 16px 16px 9px 24px; } }
#main-header .main-header-content-wrap.nav-open { background: #fff; border-bottom: 1px solid #B6BEC7; }
#main-header .main-header-content-wrap.nav-open .logo .dark-style { opacity: 0; visibility: hidden; }
#main-header .main-header-content-wrap.nav-open .logo .white-style { opacity: 1; visibility: visible; }
#main-header .main-header-content-wrap.nav-open .navigation .navi-item { background-color: #fff; }
#main-header .main-header-content-wrap.nav-open .navigation .navi-item .navi-title { font-weight: 500; font-family: 'Noto Sans TC'; color: #2A3342; z-index: 1; }
#main-header .main-header-content-wrap.nav-open .navigation .navi-item .navi-title a { color: #2A3342; }
#main-header .main-header-content-wrap.nav-open .navigation .navi-item .navi-content { opacity: 1; visibility: visible; z-index: 0; }
#main-header .main-header-content-wrap.nav-open .navigation .navi-item:hover .navi-title { color: #17B6C9; }
#main-header .main-header-content-wrap.nav-open .navigation .navi-item:hover .navi-title a { color: #17B6C9; }
#main-header .main-header-content-wrap.nav-open .navigation .navi-item:hover .navi-content { opacity: 1; transition-delay: 0s; transform: translateY(0); animation: none !important; }
#main-header .main-header--scrolled-dark { background: rgba(27, 32, 40, 0.7); border-bottom: 1px solid #727D8C; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#main-header .main-header--scrolled-dark .logo .dark-style { opacity: 1; visibility: visible; }
#main-header .main-header--scrolled-dark .logo .white-style { opacity: 0; visibility: hidden; }
#main-header .main-header--scrolled-reg-dark { background: rgba(27, 32, 40, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#main-header .main-header--scrolled-reg-dark .logo .dark-style { opacity: 1; visibility: visible; }
#main-header .main-header--scrolled-reg-dark .logo .white-style { opacity: 0; visibility: hidden; }
@media (max-width: 1199px) { #main-header .main-header--scrolled-reg-dark { background: #FDFDFD; border-bottom: 1px solid #C7CDD4; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  #main-header .main-header--scrolled-reg-dark .logo .dark-style { opacity: 0; visibility: hidden; }
  #main-header .main-header--scrolled-reg-dark .logo .white-style { opacity: 1; visibility: visible; } }
#main-header.pages-header, #main-header .main-header--scrolled-light { background: #FDFDFD; border-bottom: 1px solid #C7CDD4; }
#main-header.pages-header #topnav, #main-header .main-header--scrolled-light #topnav { background: #FDFDFD; }
#main-header.pages-header .navigation .navi-item .navi-title, #main-header .main-header--scrolled-light .navigation .navi-item .navi-title { font-weight: 500; font-family: 'Noto Sans TC'; color: #2A3342; }
#main-header.pages-header .navigation .navi-item .navi-title a, #main-header .main-header--scrolled-light .navigation .navi-item .navi-title a { color: #2A3342; }
#main-header.pages-header .navigation .navi-item:hover .navi-title, #main-header .main-header--scrolled-light .navigation .navi-item:hover .navi-title { color: rgba(42, 51, 66, 0.7); }
#main-header.pages-header .navigation .navi-item:hover .navi-title a, #main-header .main-header--scrolled-light .navigation .navi-item:hover .navi-title a { color: rgba(42, 51, 66, 0.7); }
#main-header.pages-header .navigation .navi-item:hover .navi-content, #main-header .main-header--scrolled-light .navigation .navi-item:hover .navi-content { opacity: 1; transition-delay: 0s; transform: translateY(0); animation: none !important; }
#main-header.pages-header .logo .dark-style, #main-header .main-header--scrolled-light .logo .dark-style { opacity: 0; visibility: hidden; }
#main-header.pages-header .logo .white-style, #main-header .main-header--scrolled-light .logo .white-style { opacity: 1; visibility: visible; }
#main-header.pages-header .tool-bar ul li a.link, #main-header .main-header--scrolled-light .tool-bar ul li a.link { font-weight: 500; font-family: 'Noto Sans TC'; color: #2A3342; }
#main-header.pages-header .tool-bar ul li a.link:hover, #main-header .main-header--scrolled-light .tool-bar ul li a.link:hover { color: #17B6C9; }
#main-header.pages-header { background: #fff !important; }
#main-header.pages-header .main-header--scrolled-light { border-bottom: none; }
#main-header.pages-header .btn-open-account { opacity: 1; visibility: visible; transition: all 0.5s ease-out; }
#main-header.pages-header .btn-open-account.showhide { opacity: 0; visibility: hidden; }
#main-header.light-weight-header .main-header-content-wrap { padding-top: 32px; padding-bottom: 2.5px; }
@media (max-width: 767px) { #main-header.light-weight-header .main-header-content-wrap { padding: 16px 16px 9px 24px; } }
#main-header .content, #main-header .header-content { width: 1280px; padding: 0 32px; margin: 0 auto; display: flex; }
@media (max-width: 1439px) { #main-header .content, #main-header .header-content { width: 100%; } }
@media (max-width: 991px) { #main-header .content, #main-header .header-content { padding: 0; } }
#main-header .header-content { justify-content: space-between; }
#main-header .main-nav { padding-top: 18px; }
@media (max-width: 991px) { #main-header .main-nav { position: absolute; z-index: -1; left: 0; top: 65px; width: 100%; background-color: #fff; padding-top: 12px; transition: all 0.5s cubic-bezier(0, 1, 0.5, 1); -webkit-transition: all 0.5s cubic-bezier(0, 1, 0.5, 1); opacity: 0; } }
#main-header .main-nav.nav-open { height: calc(100vh - 65px); height: calc(100dvh - 65px); overflow-y: auto; opacity: 100; z-index: 2; padding-bottom: 104px; }
#main-header .logo { position: relative; width: 170px; height: 57.5px; display: block; overflow: hidden; }
@media (max-width: 991px) { #main-header .logo { width: 115px; height: 39px; } }
#main-header .logo .dark-style { position: absolute; left: 0; top: 0; transition: all 0.5s ease-out; opacity: 1; visibility: visible; }
#main-header .logo .white-style { position: absolute; left: 0; top: 0; transition: all 0.5s ease-out; opacity: 0; visibility: hidden; }
#main-header .logo img { width: 100%; }
#main-header .tool-bar { display: flex; align-items: center; }
#main-header .tool-bar ul { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
#main-header .tool-bar ul li { font-family: 'Noto Sans TC'; font-size: 16px; font-weight: 300; line-height: 1.5; }
#main-header .tool-bar ul li + li { margin-left: 24px; }
#main-header .tool-bar ul li a.link { color: #FDFDFD; text-decoration: none; transition: color 0.3s ease-out; }
#main-header .tool-bar ul li a.link:hover { color: rgba(253, 253, 253, 0.7); }
#main-header .btn-open-account { height: 32px; opacity: 0; visibility: hidden; transition: all 0.3s ease-out; }
#main-header .btn-open-account.active, #main-header .btn-open-account.pages { visibility: visible; opacity: 1; }

.navigation { display: flex; }
@media (max-width: 991px) { .navigation { display: block; } }
.navigation .navi-item { position: relative; padding-bottom: 18px; margin: 0 20px; }
.navigation .navi-item:hover .navi-title { color: rgba(253, 253, 253, 0.7); }
.navigation .navi-item:hover .navi-title a { color: rgba(253, 253, 253, 0.7); }
.navigation .navi-item:hover .navi-content { visibility: visible; opacity: 0; transform: translateY(-10px); top: 90%; animation-delay: 0.2s; animation-name: initActionAnimationY1; animation-duration: 0.5s; animation-fill-mode: forwards; }
@media (max-width: 991px) { .navigation .navi-item:hover .navi-content { visibility: visible; opacity: 1; transform: translateY(0); top: auto; animation: none; } }
@media (max-width: 991px) { .navigation .navi-item { padding-bottom: 0; margin: 0; } }
.navigation .navi-item .navi-title { display: flex; justify-content: space-between; align-items: center; font-family: 'Noto Sans TC'; font-size: 16px; font-weight: 300; line-height: 1.5; letter-spacing: 4px; color: #FDFDFD; cursor: pointer; }
.navigation .navi-item .navi-title .en-text { font-weight: 500; font-family: 'Montserrat'; }
.navigation .navi-item .navi-title .icon-new-arrow-down { display: none; }
@media (max-width: 991px) { .navigation .navi-item .navi-title .icon-new-arrow-down { display: block; transition: all 0.3s ease-out; } }
.navigation .navi-item .navi-title a { color: #FDFDFD; text-decoration: none; transition: color 0.3s ease-out; }
@media (max-width: 991px) { .navigation .navi-item .navi-title { font-weight: 500; font-family: 'Noto Sans TC'; padding: 12px 16px 12px 24px; color: #2A3342; }
  .navigation .navi-item .navi-title a { color: #2A3342; } }
.navigation .navi-item .navi-title.active .icon-new-arrow-down { transform: rotate(-180deg); }
.navigation .navi-item .navi-content { opacity: 0; visibility: hidden; position: absolute; left: 50%; top: 70%; margin-left: -102px; background: #2A3342; box-shadow: 4px 4px 9px rgba(27, 32, 40, 0.1); border-radius: 16px; width: 204px; padding: 32px; z-index: 2; }
@media (max-width: 991px) { .navigation .navi-item .navi-content { position: static; margin-left: 0; background: transparent; padding: 0; box-shadow: none; border-radius: 0; width: 100%; }
  .navigation .navi-item .navi-content ul { padding: 0 24px; }
  .navigation .navi-item .navi-content::after { content: ''; display: block; margin: 8px 20px 4px 20px; height: 1px; background-color: #B6BEC7; } }
.navigation .navi-item .navi-content ul li { display: block; font-family: 'Noto Sans TC'; font-size: 16px; font-weight: 300; line-height: 1.5; }
.navigation .navi-item .navi-content ul li + li { margin-top: 24px; }
.navigation .navi-item .navi-content ul li.overview { padding-bottom: 16px; border-bottom: 1px solid #727D8C; }
.navigation .navi-item .navi-content ul li a { display: inline-block; color: #fff; text-decoration: none; transition: color 0.3s ease-out; }
.navigation .navi-item .navi-content ul li a:hover { color: #17B6C9; }
@media (max-width: 991px) { .navigation .navi-item .navi-content ul li { font-weight: 500; padding: 8px 0; }
  .navigation .navi-item .navi-content ul li + li { margin-top: 0; }
  .navigation .navi-item .navi-content ul li.overview { padding-bottom: 8px; border: none; }
  .navigation .navi-item .navi-content ul li a { display: block; color: #2A3342; } }

.navigation.qa { display: block; }
.navigation.qa .navi-item { position: relative; padding-bottom: 0; margin: 0; }
.navigation.qa .navi-item:hover .navi-title { color: rgba(253, 253, 253, 0.7); }
.navigation.qa .navi-item:hover .navi-title a { color: rgba(253, 253, 253, 0.7); }
.navigation.qa .navi-item:hover .navi-content { visibility: visible; opacity: 1; transform: translateY(0); top: auto; animation: none; }
.navigation.qa .navi-item:last-child .navi-content::after { display: none; }
.navigation.qa .navi-item .navi-title { display: flex; justify-content: space-between; align-items: center; font-family: 'Noto Sans TC'; font-size: 16px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: #2A3342; padding: 12px 16px 12px 24px; cursor: pointer; }
.navigation.qa .navi-item .navi-title .icon-new-arrow-down { display: block; transition: all 0.3s ease-out; }
.navigation.qa .navi-item .navi-title a { color: #2A3342; text-decoration: none; transition: color 0.3s ease-out; }
.navigation.qa .navi-item .navi-title.active .icon-new-arrow-down { transform: rotate(-180deg); }
.navigation.qa .navi-item .navi-content { opacity: 0; visibility: hidden; position: static; margin-left: 0; background: transparent; box-shadow: none; border-radius: 16px; width: 100%; padding: 0; }
.navigation.qa .navi-item .navi-content ul { padding: 0 24px; }
.navigation.qa .navi-item .navi-content::after { content: ''; display: block; margin: 8px 20px 4px 20px; height: 1px; background-color: #B6BEC7; }
.navigation.qa .navi-item .navi-content ul li { display: block; font-family: 'Noto Sans TC'; font-size: 16px; font-weight: 500; line-height: 1.5; padding: 8px 0; }
.navigation.qa .navi-item .navi-content ul li + li { margin-top: 0; }
.navigation.qa .navi-item .navi-content ul li a { display: block; color: #2A3342; text-decoration: none; transition: color 0.3s ease-out; }
.navigation.qa .navi-item .navi-content ul li a:hover { color: #17B6C9; }

#topnav { height: 32px; transition: background-color 0.5s; }
#topnav .content { width: 1280px; padding: 0 32px; height: 100%; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; }
@media (max-width: 1439px) { #topnav .content { width: 100%; } }
#topnav .navigation { padding-top: 6px; }
#topnav .navigation .navi-item { margin: 0; padding-bottom: 6px; }
#topnav .navigation .navi-item .navi-title { font-size: 14px; line-height: 20px; letter-spacing: 0; }
#topnav .navigation .navi-item + .navi-item { margin-left: 24px; }
#topnav .navigation .navi-item .navi-content { top: 90%; }
#topnav .navigation .navi-item:hover .navi-content { top: 110%; }

.top-nav-mobile { padding: 16px 24px 16px 24px; background-color: #fff; position: relative; }
.top-nav-mobile::before { content: ''; display: block; margin: 0 -4px; height: 1px; background-color: #B6BEC7; margin-bottom: 16px; }
.top-nav-mobile ul li { display: block; font-family: 'Noto Sans TC'; font-weight: 500; padding: 12px 0; color: #2A3342; }
.top-nav-mobile ul li a { color: #2A3342; text-decoration: none; transition: color 0.3s ease-out; }
.top-nav-mobile ul li a:hover { color: #17B6C9; }
.top-nav-mobile .navigation .navi-item { padding-bottom: 0; margin: 0; }
.top-nav-mobile .navigation .navi-item .navi-title { letter-spacing: 0; padding: 12px 0 12px 0; }
.top-nav-mobile .navigation .navi-item .navi-content { padding-left: 0; padding-right: 0; }

.tool-bar-mobile { position: fixed; top: calc(100vh - 104px); top: calc(100dvh - 104px); left: 0; right: 0; width: 100%; z-index: 1; padding: 16px 16px 40px 16px; background-color: #fff; box-shadow: 0px -2px 12px rgba(54, 64, 83, 0.06); }

#main-footer { background-color: #1B2028; color: #fff; width: 100%; min-height: 620px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; padding-top: 200px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#main-footer.pages-footer { position: relative; padding-top: 88px; margin-top: -340px; min-height: auto; background-color: #F3F5F6; z-index: 10; }
#main-footer.pages-footer .gotoTop { bottom: auto; top: -90px; }
@media (max-width: 991px) { #main-footer.pages-footer .gotoTop { top: -74px; } }
@media (max-width: 767px) { #main-footer.pages-footer { padding-top: 60px; margin-top: 0; } }
#main-footer.pages-footer #footer-nav .navi-item .navi-title { font-family: 'Noto Sans TC'; color: #2A3342; }
#main-footer.pages-footer #footer-nav .navi-item .navi-content ul li { font-family: 'Noto Sans TC'; color: #364053; }
#main-footer.pages-footer #footer-nav .navi-item .navi-content ul li a { color: #364053; }
#main-footer.pages-footer #footer-nav .navi-item .navi-content ul li a:hover { color: #17B6C9; }
#main-footer.pages-footer .richart-app-download .title { color: #09090A; }
#main-footer.pages-footer .richart-app-download .info { color: #727D8C; }
@media (max-width: 991px) { #main-footer.pages-footer #bottom-nav::before { opacity: 0.4; } }
#main-footer.pages-footer #bottom-nav .bottom-content { color: #727D8C; font-weight: 500; font-family: 'Noto Sans TC'; }
#main-footer.pages-footer #bottom-nav .bottom-content ul { margin-bottom: 0; }
#main-footer.pages-footer #bottom-nav .bottom-content ul li { font-weight: 500; font-family: 'Noto Sans TC'; }
#main-footer.pages-footer #bottom-nav .bottom-content ul li a { color: #727D8C; }
#main-footer.pages-footer #bottom-nav .bottom-content ul li a:hover { color: #48556C; }
#main-footer.light-weight-footer { background-color: #F3F5F6; padding-top: 170px; min-height: 350px; }
@media (max-width: 1199px) { #main-footer.light-weight-footer { position: relative; padding-top: 0; min-height: 100px; } }
@media (min-width: 1200px) and (max-width: 1439px) { #main-footer.light-weight-footer .footer-content { margin-left: 112px; margin-right: 112px; width: auto; } }
#main-footer.light-weight-footer #bottom-nav { margin-top: 0; padding-bottom: 32px; }
@media (max-width: 1439px) { #main-footer.light-weight-footer #bottom-nav { margin: 0; } }
@media (max-width: 1199px) { #main-footer.light-weight-footer #bottom-nav::before { content: ''; display: block; margin: 0 32px; height: 1px; background-color: #727D8C; width: auto; opacity: 0.4; } }
#main-footer.light-weight-footer #bottom-nav .bottom-content { margin-left: 0; color: #727D8C; font-weight: 500; font-family: 'Noto Sans TC'; }
#main-footer.light-weight-footer #bottom-nav .bottom-content ul { margin-bottom: 0; flex-wrap: wrap; }
#main-footer.light-weight-footer #bottom-nav .bottom-content ul li { font-weight: 500; font-family: 'Noto Sans TC'; }
#main-footer.light-weight-footer #bottom-nav .bottom-content ul li a { color: #727D8C; }
#main-footer.light-weight-footer #bottom-nav .bottom-content ul li a:hover { color: #48556C; }
@media (max-width: 1199px) { #main-footer.light-weight-footer #bottom-nav .bottom-content { margin-top: 8px; } }
#main-footer.light-weight-footer #bottom-nav .logo { margin-bottom: 32px; }
#main-footer.light-weight-footer .richart-app-download { margin-left: 32px; margin-right: 0; }
@media (min-width: 1200px) and (max-width: 1439px) { #main-footer.light-weight-footer .richart-app-download { margin-left: 0; } }
@media (min-width: 768px) and (max-width: 1199px) { #main-footer.light-weight-footer .richart-app-download { margin-left: 0; margin-top: 32px; padding: 0 32px; } }
@media (max-width: 767px) { #main-footer.light-weight-footer .richart-app-download { margin-left: 0; margin-top: 32px; } }
#main-footer.light-weight-footer .richart-app-download .content { margin-top: 0; }
#main-footer.light-weight-footer .richart-app-download .title { color: #2A3342; }
#main-footer.light-weight-footer .richart-app-download .info { color: #727D8C; font-weight: 500; }
@media (max-width: 1199px) { #main-footer.light-weight-footer .richart-app-download .info { padding-bottom: 8px; } }
#main-footer .footer-content { width: 1216px; margin: 0 auto; }
@media (max-width: 1439px) { #main-footer .footer-content { width: 100%; overflow: hidden; } }
#main-footer::after { content: ''; display: block; width: 100%; height: 6px; background: radial-gradient(106.63% 52125.52% at 100% 100.01%, rgba(48, 221, 232, 0.50958) 0%, #30dde8 22.3%, rgba(48, 221, 232, 0.49) 50.52%, #30dde8 76.03%, rgba(48, 221, 232, 0.12) 100%); position: absolute; left: 0; bottom: 0; z-index: 1; }
@media (max-width: 991px) { #main-footer { padding-top: 50px; position: relative; } }

#footer-nav .navi-item { position: static; flex-basis: 25%; margin: 0 10px 0 0; }
#footer-nav .navi-item:hover .navi-title { color: #FDFDFD; }
#footer-nav .navi-item:hover .navi-content { visibility: visible; opacity: 1; transition-delay: 0s; transform: translateY(0); animation: none !important; }
@media (max-width: 1439px) { #footer-nav .navi-item { margin: 0 10px; } }
@media (max-width: 991px) { #footer-nav .navi-item { padding-bottom: 0; margin: 0; } }
#footer-nav .navi-item .navi-title { font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: #FDFDFD; cursor: default; }
@media (max-width: 991px) { #footer-nav .navi-item .navi-title { padding: 12px 16px; font-size: 18px; cursor: pointer; }
  #footer-nav .navi-item .navi-title a { color: #2A3342; } }
#footer-nav .navi-item .navi-title i { transition: transform 0.3s ease-out; transform: rotate(0deg); }
#footer-nav .navi-item .navi-title.active i { transform: rotate(180deg); }
#footer-nav .navi-item .navi-content { opacity: 1; visibility: visible; position: static; margin-left: 0; background: none; box-shadow: none; border-radius: 0; width: 100%; padding: 0; margin-top: 28px; }
#footer-nav .navi-item .navi-content ul { transition: all 0.5s ease-out; }
#footer-nav .navi-item .navi-content ul li { display: block; font-family: 'Noto Sans TC'; font-size: 16px; font-weight: 300; line-height: 1.5; }
#footer-nav .navi-item .navi-content ul li + li { margin-top: 8px; }
#footer-nav .navi-item .navi-content ul li a { color: #EDF0F2; text-decoration: none; transition: color 0.3s ease-out; }
#footer-nav .navi-item .navi-content ul li a:hover { color: #17B6C9; }
@media (max-width: 991px) { #footer-nav .navi-item .navi-content { margin-top: 0; }
  #footer-nav .navi-item .navi-content .navi-title { cursor: pointer; }
  #footer-nav .navi-item .navi-content ul { padding: 4px 16px 16px 16px; display: flex; flex-wrap: wrap; }
  #footer-nav .navi-item .navi-content ul li { flex-basis: 50%; padding: 0; margin-top: 12px; }
  #footer-nav .navi-item .navi-content ul li + li { margin-top: 12px; }
  #footer-nav .navi-item .navi-content::after { display: none; } }

.footer-sns { margin-top: 24px; }
@media (max-width: 991px) { .footer-sns { padding: 0 16px; } }
.footer-sns ul { display: flex; }
.footer-sns ul li + li { margin-left: 30px; }
.footer-sns ul li a i { opacity: 1; transition: opacity 0.3s; }
.footer-sns ul li a:hover i { opacity: 0.8; }

.richart-app-download { margin-right: 20px; }
.richart-app-download .title { font-family: 'Noto Sans TC'; font-size: 16px; font-weight: 500; line-height: 20px; color: #FDFDFD; }
.richart-app-download .content { margin-top: 36px; }
.richart-app-download .qrcode img { width: 110px; height: 110px; }
.richart-app-download .info { margin-top: 16px; font-weight: 300; font-size: 12px; line-height: 20px; font-family: 'Noto Sans TC'; color: #C7CDD4; }
@media (max-width: 991px) { .richart-app-download { margin-right: 0; margin-top: 40px; padding: 0 16px; }
  .richart-app-download .title { font-size: 14px; }
  .richart-app-download .content { margin-top: 16px; }
  .richart-app-download .info { color: #B6BEC7; } }

#bottom-nav { margin-top: 60px; padding-bottom: 16px; align-items: center; }
@media (max-width: 1439px) { #bottom-nav { margin-left: 10px; margin-right: 10px; } }
@media (max-width: 991px) { #bottom-nav { padding-bottom: 40px; margin-top: 8px; margin-left: 0; margin-right: 0; }
  #bottom-nav::before { content: ''; display: block; margin: 0 16px; height: 1px; background-color: #727D8C; width: auto; } }
#bottom-nav .central-deposit-logo { width: 40px; height: 40px; }
#bottom-nav .central-deposit-logo img { width: 100%; }
@media (max-width: 991px) { #bottom-nav .central-deposit-logo { width: 36px; height: 36px; } }
#bottom-nav .logo { width: 192px; height: 56.5px; }
#bottom-nav .logo img { width: 100%; }
@media (max-width: 991px) { #bottom-nav .logo { display: none; } }
#bottom-nav .bottom-content { margin-left: 55px; font-size: 12px; line-height: 20px; font-weight: 300; font-family: 'Noto Sans TC'; color: #C7CDD4; display: flex; align-items: center; }
#bottom-nav .bottom-content ul { display: flex; align-items: center; }
#bottom-nav .bottom-content ul li { display: inline-block; margin-right: 8px; }
#bottom-nav .bottom-content ul li a { color: #C7CDD4; transition: color 0.3s ease-out; }
#bottom-nav .bottom-content ul li a:hover { text-decoration: none; color: #FDFDFD; }
#bottom-nav .bottom-content ul li + li::before { content: '|'; display: inline-block; margin-right: 8px; }
@media (max-width: 991px) { #bottom-nav .bottom-content { margin-left: 0; margin-top: 8px; }
  #bottom-nav .bottom-content ul { flex-wrap: wrap; } }

.hamburger-menu { width: 24px; height: 24px; margin-left: 18px; position: relative; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; }
.hamburger-menu span { transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; }
.hamburger-menu input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; opacity: 0; z-index: 3; }
.hamburger-menu input:hover { cursor: pointer; }
.hamburger-menu input:checked ~ .bar-top { transform: rotate(45deg); }
.hamburger-menu input:checked ~ .bar-middle { opacity: 0; }
.hamburger-menu input:checked ~ .bar-bottom { transform: rotate(-45deg); }
.hamburger-menu .bar-top, .hamburger-menu .bar-middle, .hamburger-menu .bar-bottom { height: 5px; background: #17B6C9; border-radius: 5px; margin: 3px 0; transform-origin: left; transition: all 0.3s; }

@keyframes initActionAnimationY1 { 100% { opacity: 1; transform: translateY(0); } }