@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul, li {
  list-style: none;
}

ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

small {
  font-size: 80%;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a, button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  /*-webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;*/
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  max-width: 100%;
}

/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
  display: none;
}

/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
*    user zoom.
*/
html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
  outline: thin dotted;
}

/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
  outline: 0;
}

/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
  margin: 0;
}

/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
  margin: 0;
}

/**
* Define consistent border, margin, and padding.
*/
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
  border: 0; /* 1 */
  padding: 0;
  white-space: normal; /* 2 */
  *margin-left: -7px; /* 3 */
}

/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
*    and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button, input, select, textarea {
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

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

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
  line-height: normal;
  overflow: visible;
}

/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
  text-transform: none;
}

/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
*    Known issue: inner spacing remains in IE 6.
*/
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  *overflow: visible; /* 4 */
}

/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
*    Known issue: excess padding remains in IE 6.
*/
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  *height: 13px; /* 3 */
  *width: 13px; /* 3 */
}

/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof).
*/
input[type=search] {
  -webkit-appearance: textfield; /* 1 */ /* 2 */
  box-sizing: border-box;
}

/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/**
* Remove most spacing between table cells.
*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html, button, input, select, textarea {
  color: #333;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

img {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.font-display {
  font-family: "Inter", "Microsoft JhengHei", Helvetica, sans-serif;
}

.font-en {
  font-family: "Roboto", "Microsoft JhengHei", Helvetica, sans-serif;
}

html,
body {
  width: 100%;
  font-family: "Noto Sans TC", "Microsoft JhengHei", Helvetica, sans-serif;
  font-weight: normal;
  font-style: normal;
  /* font-size: 16px; */
  /* line-height: 22px; */
}

html {
  scroll-padding-top: 90px;
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  box-sizing: border-box;
}

p {
  line-height: 1.6;
  padding: 0 0 0.3em 0;
}

.header-app a {
  text-decoration: none;
  color: inherit;
}
.header-app a:focus {
  outline: none;
}
.header-app h1,
.header-app h2,
.header-app h3,
.header-app h4,
.header-app h5,
.header-app h6 {
  font-size: 100%;
  font: inherit;
}

.footer a {
  text-decoration: none;
  color: inherit;
}
.footer a:focus {
  outline: none;
}
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
  font-size: 100%;
  font: inherit;
}

b, strong {
  font-weight: bold;
}

ol, ul {
  list-style-position: outside;
  list-style-image: none;
  padding-left: 1rem;
  font-size: 1rem;
  line-height: 1.4;
}

ol li {
  display: list-item;
  list-style: decimal;
}

ul li {
  display: list-item;
  list-style-type: disc;
}
ul li::marker {
  color: #333333;
  font-size: 1rem;
}

ul[class], ol[class] {
  list-style: none;
  padding-left: 0;
}

ul[class] li, ol[class] li {
  list-style: none;
}

button {
  outline: 0;
  border: 0px;
  background-color: unset;
}
button:focus {
  outline: 0;
  border: 0px;
}

.frame-outer {
  width: 100%;
  box-sizing: border-box;
}

.wrap {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  /* padding: 128px 0 0; */
}
@media (min-width: 641px) {
  .wrap {
    position: relative;
    min-height: 80vh;
  }
}
@media (max-width: 800px) {
  .wrap {
    /* padding: 72px 0 0; */
  }
}


.container-index {
  width: 1225px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 16px;
}
@media (max-width: 640px) {
  .container-index {
    padding: 0;
  }
}

@media (max-width: 640px) {
  .inner-container {
    padding: 0 16px;
  }
}

.imgbox {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.img-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.2s;
}

.img-contain {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: 0.2s;
}

.img-ab-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: 0.2s;
}

.img-ab-contain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  transition: 0.2s;
}

@media (min-width: 801px) {
  .hide-web {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .hide-pad-content {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .hide-pad-content-max {
    display: none !important;
  }
}

@media (min-width: 801px) {
  .hide-pad-min {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .hide-pad {
    display: none !important;
  }
}

@media (min-width: 641px) {
  .hide-mobile-min {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
}

.divider-vertical {
  width: 1px;
  height: 32px;
  background-color: #CCCCCC;
  margin: 0 24px;
}
@media (max-width: 1024px) {
  .divider-vertical {
    margin: 0 8px;
  }
}


.ad {
  margin-top: 48px;
}
@media (max-width: 640px) {
  .ad {
    box-sizing: border-box;
    padding: 0 16px;
    margin: 16px 0;
  }
}
.ad > a {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}
.ad.ad-horzional {
  width: 100%;
  height: 120px;
}
@media (max-width: 640px) {
  .ad.ad-horzional {
    height: 72px;
  }
}
.ad.ad-vertical {
  width: 100%;
  height: 360px;
}
@media (max-width: 640px) {
  .ad.ad-vertical {
    height: 72px;
  }
}
.ad img {
  width: 100%;
  height: 100%;
  display: inline-block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.ad.aside-ad {
  margin-top: 0px;
}
.ad.aside-ad.ad-horzional {
  width: 100%;
  height: 200px;
}
@media (max-width: 640px) {
  .ad.aside-ad.ad-horzional {
    height: 72px;
  }
}
.ad.aside-ad.ad-vertical {
  width: 100%;
  height: 360px;
}
@media (max-width: 640px) {
  .ad.aside-ad.ad-vertical {
    height: 72px;
  }
}

.inner-page-ad {
  padding: 0;
}

.aside {
  width: 288px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 800px) {
  .aside {
    width: 240px;
  }
}
@media (max-width: 640px) {
  .aside {
    width: 100%;
    background-color: #F6F8FA;
  }
}

.aside-block {
  box-sizing: border-box;
  padding: 12px 16px 24px;
  background-color: #F6F8FA;
  border-radius: 12px;
}
@media (max-width: 800px) {
  .aside-block {
    border-radius: 0px;
    padding: 12px 16px 12px;
  }
}

.aside-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .aside-title {
    margin-bottom: 0;
  }
}

[class*=flex-col-] {
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
}
@media (min-width: 1281px) {
  [class*=flex-col-] {
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
  }
}
[class*=flex-col-] [class*=col-] {
  padding: 0 0.5rem;
  box-sizing: border-box;
}
@media (min-width: 1281px) {
  [class*=flex-col-] [class*=col-] {
    padding: 0 1rem;
  }
}

.flex-col {
  display: flex;
}

.flex-col-web {
  display: block;
  width: calc(100% + 1rem);
  margin-left: -0.5rem;
}
@media (min-width: 1281px) {
  .flex-col-web {
    display: flex;
    width: calc(100% + 3rem);
    margin-left: -1.5rem;
  }
}
.flex-col-web [class*=col-] {
  padding: 0 0.5rem;
  box-sizing: border-box;
}
@media (min-width: 1281px) {
  .flex-col-web [class*=col-] {
    padding: 0 1rem;
  }
}

.flex-align-center {
  align-items: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-start {
  justify-content: flex-start;
}

.flex-justify-end {
  justify-content: flex-end;
}

.flex-justify-between {
  justify-content: space-between;
}

.col-100 {
  width: 100%;
}

@media (min-width: 641px) {
  .col-sm-100 {
    width: 100%;
  }
}
@media (min-width: 801px) {
  .col-md-100 {
    width: 100%;
  }
}
@media (min-width: 1281px) {
  .col-lg-100 {
    width: 100%;
  }
}
.col-90 {
  width: 90%;
}

@media (min-width: 641px) {
  .col-sm-90 {
    width: 90%;
  }
}
@media (min-width: 801px) {
  .col-md-90 {
    width: 90%;
  }
}
@media (min-width: 1281px) {
  .col-lg-90 {
    width: 90%;
  }
}
.col-80 {
  width: 80%;
}

@media (min-width: 641px) {
  .col-sm-80 {
    width: 80%;
  }
}
@media (min-width: 801px) {
  .col-md-80 {
    width: 80%;
  }
}
@media (min-width: 1281px) {
  .col-lg-80 {
    width: 80%;
  }
}
.col-75 {
  width: 75%;
}

@media (min-width: 641px) {
  .col-sm-75 {
    width: 75%;
  }
}
@media (min-width: 801px) {
  .col-md-75 {
    width: 75%;
  }
}
@media (min-width: 1281px) {
  .col-lg-75 {
    width: 75%;
  }
}
.col-70 {
  width: 70%;
}

@media (min-width: 641px) {
  .col-sm-70 {
    width: 70%;
  }
}
@media (min-width: 801px) {
  .col-md-70 {
    width: 70%;
  }
}
@media (min-width: 1281px) {
  .col-lg-70 {
    width: 70%;
  }
}
.col-65 {
  width: 65%;
}

@media (min-width: 641px) {
  .col-sm-65 {
    width: 65%;
  }
}
@media (min-width: 801px) {
  .col-md-65 {
    width: 65%;
  }
}
@media (min-width: 1281px) {
  .col-lg-65 {
    width: 65%;
  }
}
.col-60 {
  width: 60%;
}

@media (min-width: 641px) {
  .col-sm-60 {
    width: 60%;
  }
}
@media (min-width: 801px) {
  .col-md-60 {
    width: 60%;
  }
}
@media (min-width: 1281px) {
  .col-lg-60 {
    width: 60%;
  }
}
.col-55 {
  width: 55%;
}

@media (min-width: 641px) {
  .col-sm-55 {
    width: 55%;
  }
}
@media (min-width: 801px) {
  .col-md-55 {
    width: 55%;
  }
}
@media (min-width: 1281px) {
  .col-lg-55 {
    width: 55%;
  }
}
.col-50 {
  width: 50%;
}

@media (min-width: 641px) {
  .col-sm-50 {
    width: 50%;
  }
}
@media (min-width: 801px) {
  .col-md-50 {
    width: 50%;
  }
}
@media (min-width: 1281px) {
  .col-lg-50 {
    width: 50%;
  }
}
.col-45 {
  width: 45%;
}

@media (min-width: 641px) {
  .col-sm-45 {
    width: 45%;
  }
}
@media (min-width: 801px) {
  .col-md-45 {
    width: 45%;
  }
}
@media (min-width: 1281px) {
  .col-lg-45 {
    width: 45%;
  }
}
.col-40 {
  width: 40%;
}

@media (min-width: 641px) {
  .col-sm-40 {
    width: 40%;
  }
}
@media (min-width: 801px) {
  .col-md-40 {
    width: 40%;
  }
}
@media (min-width: 1281px) {
  .col-lg-40 {
    width: 40%;
  }
}
.col-35 {
  width: 35%;
}

@media (min-width: 641px) {
  .col-sm-35 {
    width: 35%;
  }
}
@media (min-width: 801px) {
  .col-md-35 {
    width: 35%;
  }
}
@media (min-width: 1281px) {
  .col-lg-35 {
    width: 35%;
  }
}
.col-33 {
  width: 33.33%;
}

@media (min-width: 641px) {
  .col-sm-33 {
    width: 33.33%;
  }
}
@media (min-width: 801px) {
  .col-md-33 {
    width: 33.33%;
  }
}
@media (min-width: 1281px) {
  .col-lg-33 {
    width: 33.33%;
  }
}
.col-30 {
  width: 30%;
}

@media (min-width: 641px) {
  .col-sm-30 {
    width: 30%;
  }
}
@media (min-width: 801px) {
  .col-md-30 {
    width: 30%;
  }
}
@media (min-width: 1281px) {
  .col-lg-30 {
    width: 30%;
  }
}
.col-25 {
  width: 25%;
}

@media (min-width: 641px) {
  .col-sm-25 {
    width: 25%;
  }
}
@media (min-width: 801px) {
  .col-md-25 {
    width: 25%;
  }
}
@media (min-width: 1281px) {
  .col-lg-25 {
    width: 25%;
  }
}
.col-20 {
  width: 20%;
}

@media (min-width: 641px) {
  .col-sm-20 {
    width: 20%;
  }
}
@media (min-width: 801px) {
  .col-md-20 {
    width: 20%;
  }
}
@media (min-width: 1281px) {
  .col-lg-20 {
    width: 20%;
  }
}
.col-15 {
  width: 15%;
}

@media (min-width: 641px) {
  .col-sm-15 {
    width: 15%;
  }
}
@media (min-width: 801px) {
  .col-md-15 {
    width: 15%;
  }
}
@media (min-width: 1281px) {
  .col-lg-15 {
    width: 15%;
  }
}
.col-10 {
  width: 10%;
}

@media (min-width: 641px) {
  .col-sm-10 {
    width: 10%;
  }
}
@media (min-width: 801px) {
  .col-md-10 {
    width: 10%;
  }
}
@media (min-width: 1281px) {
  .col-lg-10 {
    width: 10%;
  }
}
.display-lg {
  font-size: 64px;
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: -0.25px;
}

.display-md {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.17;
  letter-spacing: -0.25px;
}

.display-sm {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0px;
}

.headline-lg {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0px;
}

.headline-md {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0px;
}

.headline-sm {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0px;
}

.headline-lg-en {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0px;
}

.headline-md-en {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0px;
}

.headline-sm-en {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0px;
}

.title-lg {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.title-md {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

.title-sm {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

.title-lg-en {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0px;
}

.title-md-en {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.title-sm-en {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

.label-lg {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

.label-md {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.5px;
}

.label-sm {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0.5px;
}

.label-lg-en {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

.label-md-en {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.5px;
}

.label-sm-en {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0.5px;
}

.body-lg {
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.1px;
}

.body-md {
  font-size: 14px;
  line-height: 1.57;
  letter-spacing: 0.1px;
}

.body-sm {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1px;
}

@media (max-width: 800px) {
  .display-lg-pad {
    font-size: 64px;
    font-weight: 500;
    line-height: 1.125;
    letter-spacing: -0.25px;
  }
  .display-md-pad {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.17;
    letter-spacing: -0.25px;
  }
  .display-sm-pad {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0px;
  }
  .headline-lg-pad {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0px;
  }
  .headline-md-pad {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0px;
  }
  .headline-sm-pad {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: 0px;
  }
  .headline-lg-en-pad {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: 0px;
  }
  .headline-md-en-pad {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0px;
  }
  .headline-sm-en-pad {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: 0px;
  }
  .title-lg-pad {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.2px;
  }
  .title-md-pad {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
  }
  .title-sm-pad {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.2px;
  }
  .title-lg-en-pad {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0px;
  }
  .title-md-en-pad {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.15px;
  }
  .title-sm-en-pad {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1px;
  }
  .label-lg-pad {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px;
  }
  .label-md-pad {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: 0.5px;
  }
  .label-sm-pad {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: 0.5px;
  }
  .label-lg-en-pad {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.1px;
  }
  .label-md-en-pad {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: 0.5px;
  }
  .label-sm-en-pad {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: 0.5px;
  }
  .body-lg-pad {
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.1px;
  }
  .body-md-pad {
    font-size: 14px;
    line-height: 1.57;
    letter-spacing: 0.1px;
  }
  .body-sm-pad {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.1px;
  }
}
.en-uppercase {
  text-transform: uppercase;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

[data-tooltip] {
  position: relative;
}
@media (max-width: 800px) {
  [data-tooltip]:before, [data-tooltip]:after {
    display: none !important;
  }
}
[data-tooltip]:before, [data-tooltip]:after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after {
  opacity: 1;
  visibility: visible;
}
[data-tooltip]:before {
  content: attr(data-tooltip-text);
  display: inline-block;
  max-width: 210px;
  min-width: 3em;
  min-height: 1em;
  color: #fff;
  font-size: 13px !important;
  text-align: center;
  background: #333333 !important;
  text-transform: capitalize;
  white-space: nowrap;
  border-radius: 5px;
  padding: 4px 5px 3px;
  line-height: 1.3;
  z-index: 2;
}
[data-tooltip]:after {
  content: "";
  width: 0;
  height: 0;
}

[data-tooltip=top]:before, [data-tooltip=top]:after {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
  margin-bottom: 13px;
}
[data-tooltip=top]:after {
  margin-bottom: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #333333;
}

[data-tooltip=bottom]:before, [data-tooltip=bottom]:after {
  top: 75%;
  left: 50%;
  transform: translate(-50%);
  margin-top: 13px;
}
[data-tooltip=bottom]:after {
  margin-top: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #333333;
}

[data-tooltip=right]:before, [data-tooltip=right]:after {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
  margin-left: 13px;
}
[data-tooltip=right]:after {
  margin-left: 9px;
  border-top: 5px solid transparent;
  border-right: 7px solid #333333;
  border-bottom: 5px solid transparent;
}

[data-tooltip=left]:before, [data-tooltip=left]:after {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
  margin-right: 13px;
}
[data-tooltip=left]:after {
  margin-right: 9px;
  border-top: 5px solid transparent;
  border-left: 7px solid #333333;
  border-bottom: 5px solid transparent;
}


.header-app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 998;
  transition: 0.3s;
}
.header-app.min-header {
  background-color: #fff;
  padding: 0;
}
@media (max-width: 800px) {
  .header-app {
    background-color: #FFFFFF;
  }
}

.header-container {
  width: 1225px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 16px;
}
@media (max-width: 800px) {
  .header-container {
    padding: 12px;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  box-sizing: border-box;
  transition: 0.3s;
}
@media (max-width: 800px) {
  .header-inner {
    align-items: flex-start;
    padding: 0;
  }
}
@media (min-width: 801px) {
  .min-header .header-inner {
    padding: 2px 16px;
  }
}

.header-logo {
  display: inline-block;
  width: 180px;
  height: 72px;
  aspect-ratio: 5/2;
}
.header-logo img {
  width: 100%;
}
@media (max-width: 1024px) {
  .header-logo {
    width: 120px;
    height: 48px;
  }
}

.header-mobile-menu {
  display: none;
  height: 36px;
  width: 36px;
  box-sizing: border-box;
  padding: 3px;
  cursor: pointer;
  margin: auto 0;
}
@media (max-width: 800px) {
  .header-mobile-menu {
    display: block;
    /* z-index: 998; */
	margin: auto 0;
  }
}
.header-mobile-menu .menu-icon-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  justify-content: space-around;
}
.header-mobile-menu .menu-icon {
  width: 100%;
  height: 3px;
  background-color: #333333;
  transition: all 0.3s ease;
}
.header-mobile-menu.is-active .menu-icon-group {
  position: relative;
}
.header-mobile-menu.is-active .menu-icon {
  position: absolute;
  transition: all 0.2s ease;
}
.header-mobile-menu.is-active .menu-icon:nth-child(1) {
  rotate: 45deg;
  transition-delay: 0.1s;
}
.header-mobile-menu.is-active .menu-icon:nth-child(2) {
  width: 0;
}
.header-mobile-menu.is-active .menu-icon:nth-child(3) {
  rotate: -45deg;
  transition-delay: 0.1s;
}

.menu-dropdown-multi-level {
  position: relative;
}
.menu-dropdown-multi-level .menu-dropdown-item.multi-level {
  cursor: pointer;
  position: relative;
}
.menu-dropdown-multi-level .menu-dropdown-item.multi-level::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  margin-bottom: 5px;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.172 12L8.22198 7.05L9.63598 5.637L16 12L9.63598 18.364L8.22198 16.949L13.172 12Z' fill='%23CBCBCB'/></svg>");
}
.menu-dropdown-multi-level .menu-dropdown-item.multi-level:hover::after {
  content: "";
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.172 12L8.22198 7.05L9.63598 5.637L16 12L9.63598 18.364L8.22198 16.949L13.172 12Z' fill='%2328476C'/></svg>");
}

@media (max-width: 1024px) {
  .menu-dropdown-multi-level .menu-dropdown-item.multi-level::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.8rem;
    vertical-align: middle;
    margin-bottom: 5px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.172 12L8.22198 7.05L9.63598 5.637L16 12L9.63598 18.364L8.22198 16.949L13.172 12Z' fill='%23CBCBCB'/></svg>");
    position: absolute;
    top: calc(50% - 0.4rem);
    right: 0.875rem;
    transform: rotate(0deg);
    transition: all ease 0.3s;
  }
  .menu-dropdown-multi-level .menu-dropdown-item.multi-level.is-active {
    background-color: #FFFFFF;
  }
  .menu-dropdown-multi-level .menu-dropdown-item.multi-level.is-active::after {
    transform: rotate(90deg);
    transition: all ease 0.3s;
  }
}
.header-submenu-dropdown {
  position: absolute;
  display: none;
  left: calc(100% - 6px);
  top: 0;
  padding: 0px 12px;
}
@media (max-width: 1024px) {
  .header-submenu-dropdown {
    padding: 0;
  }
  .header-submenu-dropdown.is-active {
    display: block;
    position: static;
    background-color: #E4EAF2;
  }
}

@media (min-width: 1025px) {
  .menu-dropdown-multi-level:hover .header-submenu-dropdown {
    display: block;
  }
}
.header-submenu-items {
  background-color: #fff;
  box-sizing: border-box;
  padding: 0.5rem 0;
  border-radius: 6px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
}
@media (max-width: 1024px) {
  .header-submenu-items {
    background-color: unset;
    box-shadow: unset;
  }
  .header-submenu-items .header-submenu-item {
    padding-left: 2rem;
  }
  .header-submenu-items .header-submenu-item:hover {
    background-color: #2CA6E0;
  }
}

.header-right {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  font-size: 14px;
  gap: 16px;
}
@media (max-width: 1024px) {
  .header-right {
    gap: 8px;
  }
}
.min-header .header-right {
  color: #333333;
}
.header-right .note {
  padding: 0 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  margin-right: 0.6rem;
}
@media (max-width: 1440px) {
  .header-right .note {
    display: none;
  }
}
@media (max-width: 640px), (min-width: 1025px) and (max-width: 1280px) {
  .header-right .note {
    display: none;
  }
}
.header-right .note:hover {
  color: #D93636;
}
.min-header .header-right .note {
  border-color: #CCCCCC;
}

.sub-menu {
  display: flex;
  align-items: center;
}

.social-media-links {
  display: flex;
  gap: 16px;
}

.social-media-link {
  /* max-height: 24px; */
}
.social-media-link .social-icon {
  width: 24px;
  height: 24px;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}
.social-media-link[data-social=facebook] .social-icon {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 2C6.477 2 2 6.477 2 12C2 16.991 5.657 21.128 10.438 21.879V14.89H7.898V12H10.438V9.797C10.438 7.291 11.93 5.907 14.215 5.907C15.309 5.907 16.453 6.102 16.453 6.102V8.562H15.193C13.95 8.562 13.563 9.333 13.563 10.124V12H16.336L15.893 14.89H13.563V21.879C18.343 21.129 22 16.99 22 12C22 6.477 17.523 2 12 2Z' fill='%23333333'/></svg>");
}
.social-media-link[data-social=instagram] .social-icon {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 2C14.717 2 15.056 2.01 16.122 2.06C17.187 2.11 17.912 2.277 18.55 2.525C19.21 2.779 19.766 3.123 20.322 3.678C20.8305 4.1779 21.224 4.78259 21.475 5.45C21.722 6.087 21.89 6.813 21.94 7.878C21.987 8.944 22 9.283 22 12C22 14.717 21.99 15.056 21.94 16.122C21.89 17.187 21.722 17.912 21.475 18.55C21.2247 19.2178 20.8311 19.8226 20.322 20.322C19.822 20.8303 19.2173 21.2238 18.55 21.475C17.913 21.722 17.187 21.89 16.122 21.94C15.056 21.987 14.717 22 12 22C9.283 22 8.944 21.99 7.878 21.94C6.813 21.89 6.088 21.722 5.45 21.475C4.78233 21.2245 4.17753 20.8309 3.678 20.322C3.16941 19.8222 2.77593 19.2175 2.525 18.55C2.277 17.913 2.11 17.187 2.06 16.122C2.013 15.056 2 14.717 2 12C2 9.283 2.01 8.944 2.06 7.878C2.11 6.812 2.277 6.088 2.525 5.45C2.77524 4.78218 3.1688 4.17732 3.678 3.678C4.17767 3.16923 4.78243 2.77573 5.45 2.525C6.088 2.277 6.812 2.11 7.878 2.06C8.944 2.013 9.283 2 12 2ZM12 7C10.6739 7 9.40215 7.52678 8.46447 8.46447C7.52678 9.40215 7 10.6739 7 12C7 13.3261 7.52678 14.5979 8.46447 15.5355C9.40215 16.4732 10.6739 17 12 17C13.3261 17 14.5979 16.4732 15.5355 15.5355C16.4732 14.5979 17 13.3261 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52678 13.3261 7 12 7ZM18.5 6.75C18.5 6.41848 18.3683 6.10054 18.1339 5.86612C17.8995 5.6317 17.5815 5.5 17.25 5.5C16.9185 5.5 16.6005 5.6317 16.3661 5.86612C16.1317 6.10054 16 6.41848 16 6.75C16 7.08152 16.1317 7.39946 16.3661 7.63388C16.6005 7.8683 16.9185 8 17.25 8C17.5815 8 17.8995 7.8683 18.1339 7.63388C18.3683 7.39946 18.5 7.08152 18.5 6.75ZM12 9C12.7957 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15 12.7957 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7957 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7957 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9Z' fill='%23333333'/></svg>");
}
.social-media-link[data-social=twitter] .social-icon {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.205 2.25H21.513L14.286 10.51L22.788 21.75H16.13L10.916 14.933L4.95 21.75H1.64L9.37 12.915L1.215 2.25H8.04L12.753 8.481L18.205 2.25ZM17.044 19.77H18.877L7.045 4.126H5.078L17.044 19.77Z' fill='%23333333'/></svg>");
}
.social-media-link[data-social=line] .social-icon {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.663 10.84C18.663 10.9792 18.6079 11.1126 18.5097 11.2112C18.4114 11.3098 18.2782 11.3655 18.139 11.366H16.676V12.303H18.139C18.2782 12.303 18.4118 12.3583 18.5102 12.4568C18.6087 12.5552 18.664 12.6888 18.664 12.828C18.664 12.9672 18.6087 13.1008 18.5102 13.1992C18.4118 13.2977 18.2782 13.353 18.139 13.353H16.15C16.0114 13.3519 15.8788 13.2962 15.781 13.1979C15.6833 13.0996 15.6283 12.9666 15.628 12.828V8.852C15.628 8.565 15.863 8.327 16.153 8.327H18.141C18.2746 8.3355 18.4 8.39464 18.4915 8.49237C18.583 8.59009 18.6339 8.71905 18.6336 8.85294C18.6333 8.98683 18.582 9.11559 18.4901 9.21297C18.3982 9.31034 18.2727 9.36901 18.139 9.377H16.676V10.315H18.139C18.429 10.315 18.663 10.551 18.663 10.84ZM14.566 13.325C14.5124 13.3423 14.4564 13.3511 14.4 13.351C14.3176 13.3527 14.236 13.3346 14.1621 13.2983C14.0881 13.2619 14.024 13.2083 13.975 13.142L11.939 10.378V12.828C11.929 12.96 11.8695 13.0833 11.7724 13.1733C11.6754 13.2633 11.5479 13.3133 11.4155 13.3133C11.2831 13.3133 11.1556 13.2633 11.0586 13.1733C10.9615 13.0833 10.902 12.96 10.892 12.828V8.852C10.8917 8.71373 10.9463 8.581 11.0438 8.48295C11.1413 8.3849 11.2737 8.32953 11.412 8.329C11.4921 8.33155 11.5706 8.3519 11.6419 8.38856C11.7132 8.42523 11.7754 8.4773 11.824 8.541L13.876 11.316V8.852C13.876 8.565 14.111 8.327 14.401 8.327C14.688 8.327 14.926 8.565 14.926 8.852V12.828C14.9257 12.9381 14.8908 13.0454 14.8262 13.1346C14.7616 13.2238 14.6706 13.2904 14.566 13.325ZM9.61601 13.352C9.47737 13.3512 9.34465 13.2957 9.24671 13.1976C9.14877 13.0995 9.09353 12.9666 9.09301 12.828V8.852C9.09301 8.565 9.32801 8.327 9.61801 8.327C9.90701 8.327 10.142 8.565 10.142 8.852V12.828C10.1412 12.9671 10.0855 13.1002 9.98695 13.1984C9.88842 13.2965 9.75508 13.3517 9.61601 13.352ZM8.08601 13.352H6.09901C5.96018 13.3512 5.82725 13.2958 5.729 13.1977C5.63074 13.0996 5.57506 12.9668 5.57401 12.828V8.852C5.57401 8.565 5.81201 8.327 6.09901 8.327C6.38901 8.327 6.62401 8.565 6.62401 8.852V12.303H8.08801C8.22725 12.303 8.36078 12.3583 8.45924 12.4568C8.55769 12.5552 8.61301 12.6888 8.61301 12.828C8.61301 12.9672 8.55769 13.1008 8.45924 13.1992C8.36078 13.2977 8.22725 13.353 8.08801 13.353L8.08601 13.352ZM12.001 2.572C6.48801 2.572 2.00101 6.215 2.00101 10.691C2.00101 14.7 5.55901 18.059 10.364 18.697C10.689 18.766 11.133 18.912 11.245 19.189C11.345 19.439 11.311 19.827 11.277 20.089L11.14 20.939C11.103 21.189 10.94 21.927 12.014 21.476C13.09 21.027 17.778 18.078 19.878 15.664C21.314 14.09 22 12.477 22 10.69C22 6.214 17.512 2.571 12 2.571L12.001 2.572Z' fill='black'/></svg>");
}
.social-media-link[data-social=youtube] .social-icon {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21.543 6.498C22 8.28 22 12 22 12C22 12 22 15.72 21.543 17.502C21.289 18.487 20.546 19.262 19.605 19.524C17.896 20 12 20 12 20C12 20 6.107 20 4.395 19.524C3.45 19.258 2.708 18.484 2.457 17.502C2 15.72 2 12 2 12C2 12 2 8.28 2.457 6.498C2.711 5.513 3.454 4.738 4.395 4.476C6.107 4 12 4 12 4C12 4 17.896 4 19.605 4.476C20.55 4.742 21.292 5.516 21.543 6.498ZM10 15.5L16 12L10 8.5V15.5Z' fill='%23333333'/></svg>");
}
.social-media-link .social-icon:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease-out;
}

.lang-select {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333333;
  transition: all 0.3s ease;
}
.lang-select .lang-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM9.71 19.667C8.72341 17.5743 8.15187 15.3102 8.027 13H4.062C4.25659 14.5389 4.89392 15.9882 5.89657 17.1717C6.89922 18.3552 8.22401 19.2221 9.71 19.667ZM10.03 13C10.181 15.439 10.878 17.73 12 19.752C13.1523 17.6766 13.8254 15.3695 13.97 13H10.03ZM19.938 13H15.973C15.8481 15.3102 15.2766 17.5743 14.29 19.667C15.776 19.2221 17.1008 18.3552 18.1034 17.1717C19.1061 15.9882 19.7434 14.5389 19.938 13ZM4.062 11H8.027C8.15187 8.68979 8.72341 6.42569 9.71 4.333C8.22401 4.77788 6.89922 5.64475 5.89657 6.8283C4.89392 8.01184 4.25659 9.4611 4.062 11ZM10.031 11H13.969C13.8248 8.6306 13.152 6.32353 12 4.248C10.8477 6.32345 10.1746 8.63052 10.03 11H10.031ZM14.29 4.333C15.2766 6.42569 15.8481 8.68979 15.973 11H19.938C19.7434 9.4611 19.1061 8.01184 18.1034 6.8283C17.1008 5.64475 15.776 4.77788 14.29 4.333Z' fill='%23333333'/></svg>");
  transition: all 0.3s ease;
}
.lang-select:hover {
  color: #2CA6E0;
  transition: all 0.3s ease;
}
.lang-select:hover .lang-icon {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM9.71 19.667C8.72341 17.5743 8.15187 15.3102 8.027 13H4.062C4.25659 14.5389 4.89392 15.9882 5.89657 17.1717C6.89922 18.3552 8.22401 19.2221 9.71 19.667ZM10.03 13C10.181 15.439 10.878 17.73 12 19.752C13.1523 17.6766 13.8254 15.3695 13.97 13H10.03ZM19.938 13H15.973C15.8481 15.3102 15.2766 17.5743 14.29 19.667C15.776 19.2221 17.1008 18.3552 18.1034 17.1717C19.1061 15.9882 19.7434 14.5389 19.938 13ZM4.062 11H8.027C8.15187 8.68979 8.72341 6.42569 9.71 4.333C8.22401 4.77788 6.89922 5.64475 5.89657 6.8283C4.89392 8.01184 4.25659 9.4611 4.062 11ZM10.031 11H13.969C13.8248 8.6306 13.152 6.32353 12 4.248C10.8477 6.32345 10.1746 8.63052 10.03 11H10.031ZM14.29 4.333C15.2766 6.42569 15.8481 8.68979 15.973 11H19.938C19.7434 9.4611 19.1061 8.01184 18.1034 6.8283C17.1008 5.64475 15.776 4.77788 14.29 4.333Z' fill='%232CA6E0'/></svg>");
  transition: all 0.3s ease;
}

.user-tools {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
@media (max-width: 1024px) {
  .user-tools {
    gap: 2px;
  }
}

.user-tool {
  box-sizing: border-box;
  padding: 5.6px 8px;
  position: relative;
}

@media (max-width: 1024px) {
  .user-tool {
    padding: 5.6px 6px;
  }
}
.user-tool .unread-dot {
  display: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #D93636;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
  position: absolute;
  top: 12%;
  right: 17%;
}
@media (max-width: 800px) {
  .user-tool .unread-dot {
	  right: auto;
	}
}

/* 只在父元素有 unread class 時顯示 */
.user-tool.unread .unread-dot {
  display: inline-block;
}

/* .user-tool.unread::after { */
  /* content: ""; */
  /* display: inline-block; */
  /* width: 10px; */
  /* height: 10px; */
  /* border-radius: 50%; */
  /* background-color: #D93636; */
  /* border: 2px solid #FFFFFF; */
  /* box-sizing: border-box; */
  /* position: absolute; */
  /* top: 12%; */
  /* right: 17%; */
/* } */
.user-tool .tool-icon {
  width: 24px;
  height: 24px;
}
.user-tool[data-user-tool=search] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.867 18 18 14.867 18 11C18 7.132 14.867 4 11 4C7.132 4 4 7.132 4 11C4 14.867 7.132 18 11 18ZM19.485 18.071L22.314 20.899L20.899 22.314L18.071 19.485L19.485 18.071Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=message] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.455 19L2 22.5V4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H21C21.2652 3 21.5196 3.10536 21.7071 3.29289C21.8946 3.48043 22 3.73478 22 4V18C22 18.2652 21.8946 18.5196 21.7071 18.7071C21.5196 18.8946 21.2652 19 21 19H6.455ZM5.763 17H20V5H4V18.385L5.763 17ZM11 10H13V12H11V10ZM7 10H9V12H7V10ZM15 10H17V12H15V10Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=notification] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M20 17H22V19H2V17H4V10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10V17ZM18 17V10C18 8.4087 17.3679 6.88258 16.2426 5.75736C15.1174 4.63214 13.5913 4 12 4C10.4087 4 8.88258 4.63214 7.75736 5.75736C6.63214 6.88258 6 8.4087 6 10V17H18ZM9 21H15V23H9V21Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=avatar] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("/images/newindex/avatar_edit.svg");
}
.user-tool[data-user-tool=folder] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12.414 5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6V20C22 20.2652 21.8946 20.5196 21.7071 20.7071C21.5196 20.8946 21.2652 21 21 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V4C2 3.73478 2.10536 3.48043 2.29289 3.29289C2.48043 3.10536 2.73478 3 3 3H10.414L12.414 5ZM4 7V19H20V7H4Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=create] {
	border:1px solid #CCCCCC;
	border-radius: 1.5rem;
}
@media (max-width: 800px) {
  .user-tool[data-user-tool=create] {
	border: 0px;
	border-radius: 0rem ;
  }
}
.user-tool[data-user-tool=create] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 7H11V11H7V13H11V17H13V13H17V11H13V7ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=favorite] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V22.143C20.0001 22.2324 19.9763 22.3202 19.9309 22.3973C19.8855 22.4743 19.8204 22.5378 19.7421 22.5811C19.6639 22.6244 19.5755 22.6459 19.4861 22.6434C19.3968 22.641 19.3097 22.6146 19.234 22.567L12 18.03L4.766 22.566C4.69037 22.6135 4.60339 22.6399 4.5141 22.6424C4.42482 22.6449 4.33649 22.6235 4.2583 22.5803C4.1801 22.5371 4.11491 22.4738 4.06948 22.3969C4.02406 22.32 4.00007 22.2323 4 22.143V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2ZM18 4H6V19.432L12 15.671L18 19.432V4Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=recorded] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6 7V4C6 3.73478 6.10536 3.48043 6.29289 3.29289C6.48043 3.10536 6.73478 3 7 3H13.414L15.414 5H21C21.2652 5 21.5196 5.10536 21.7071 5.29289C21.8946 5.48043 22 5.73478 22 6V16C22 16.2652 21.8946 16.5196 21.7071 16.7071C21.5196 16.8946 21.2652 17 21 17H18V20C18 20.2652 17.8946 20.5196 17.7071 20.7071C17.5196 20.8946 17.2652 21 17 21H3C2.73478 21 2.48043 20.8946 2.29289 20.7071C2.10536 20.5196 2 20.2652 2 20V8C2 7.73478 2.10536 7.48043 2.29289 7.29289C2.48043 7.10536 2.73478 7 3 7H6ZM6 9H4V19H16V17H6V9ZM8 5V15H20V7H14.586L12.586 5H8Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=achievement] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M20 17H22V19H2V17H4V10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10V17ZM18 17V10C18 8.4087 17.3679 6.88258 16.2426 5.75736C15.1174 4.63214 13.5913 4 12 4C10.4087 4 8.88258 4.63214 7.75736 5.75736C6.63214 6.88258 6 8.4087 6 10V17H18ZM9 21H15V23H9V21Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=bought] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M6.505 2H17.505C17.6602 2 17.8134 2.03614 17.9522 2.10557C18.0911 2.175 18.2119 2.2758 18.305 2.4L21.005 6V21C21.005 21.2652 20.8996 21.5196 20.7121 21.7071C20.5246 21.8946 20.2702 22 20.005 22H4.005C3.73979 22 3.48543 21.8946 3.2979 21.7071C3.11036 21.5196 3.005 21.2652 3.005 21V6L5.705 2.4C5.79815 2.2758 5.91894 2.175 6.05779 2.10557C6.19665 2.03614 6.34976 2 6.505 2ZM19.005 8H5.005V20H19.005V8ZM18.505 6L17.005 4H7.005L5.505 6H18.505ZM9.005 10V12C9.005 12.7956 9.32107 13.5587 9.88368 14.1213C10.4463 14.6839 11.2094 15 12.005 15C12.8007 15 13.5637 14.6839 14.1263 14.1213C14.6889 13.5587 15.005 12.7956 15.005 12V10H17.005V12C17.005 13.3261 16.4782 14.5979 15.5405 15.5355C14.6029 16.4732 13.3311 17 12.005 17C10.6789 17 9.40715 16.4732 8.46947 15.5355C7.53179 14.5979 7.005 13.3261 7.005 12V10H9.005Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=setting] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M14 21V22C14.4687 22 14.8745 21.6744 14.9762 21.2169L14 21ZM9.99999 21L9.0238 21.2169C9.12546 21.6744 9.53128 22 9.99999 22V21ZM9.44899 18.52L10.4252 18.3031C10.3529 17.9779 10.1234 17.71 9.81315 17.5887L9.44899 18.52ZM7.62999 17.47L8.25435 16.6889C7.99415 16.4809 7.64748 16.4161 7.32975 16.5161L7.62999 17.47ZM5.20599 18.233L4.33997 18.733C4.57433 19.1389 5.05916 19.3276 5.50624 19.1869L5.20599 18.233ZM3.20599 14.769L2.52984 14.0322C2.18459 14.3491 2.10567 14.8632 2.33997 15.269L3.20599 14.769ZM5.07799 13.051L5.75415 13.7878C5.99914 13.5629 6.11635 13.231 6.06686 12.9022L5.07799 13.051ZM5.07799 10.951L6.06686 11.0998C6.11633 10.7711 5.99922 10.4393 5.75436 10.2144L5.07799 10.951ZM3.20599 9.232L2.33997 8.73199C2.10572 9.13772 2.18455 9.65169 2.52963 9.96857L3.20599 9.232ZM5.20599 5.768L5.50624 4.81414C5.05916 4.67341 4.57433 4.86208 4.33997 5.26799L5.20599 5.768ZM7.62999 6.531L7.32975 7.48486C7.64756 7.5849 7.99433 7.52008 8.25454 7.31199L7.62999 6.531ZM9.44999 5.48L9.81424 6.4113C10.1246 6.28991 10.3541 6.02188 10.4263 5.69651L9.44999 5.48ZM9.99999 3V2C9.53113 2 9.12523 2.32575 9.02371 2.78349L9.99999 3ZM14 3L14.9762 2.78311C14.8745 2.32555 14.4687 2 14 2V3ZM14.551 5.48L13.5748 5.69689C13.6471 6.02212 13.8765 6.29 14.1868 6.41133L14.551 5.48ZM16.37 6.53L15.7457 7.31116C16.0059 7.51912 16.3525 7.58387 16.6702 7.48386L16.37 6.53ZM18.794 5.767L19.66 5.26699C19.4257 4.86108 18.9408 4.67241 18.4937 4.81314L18.794 5.767ZM20.794 9.231L21.4701 9.96776C21.8154 9.65091 21.8943 9.13681 21.66 8.73099L20.794 9.231ZM18.922 10.949L18.2458 10.2122C18.0008 10.4371 17.8836 10.7691 17.9331 11.0979L18.922 10.949ZM18.922 13.049L17.9331 12.9001C17.8836 13.2289 18.0008 13.5609 18.2458 13.7858L18.922 13.049ZM20.794 14.767L21.66 15.267C21.8943 14.8612 21.8154 14.3471 21.4701 14.0302L20.794 14.767ZM18.794 18.231L18.4937 19.1849C18.9408 19.3256 19.4257 19.1369 19.66 18.731L18.794 18.231ZM16.37 17.468L16.6702 16.5141C16.3522 16.414 16.0052 16.479 15.7449 16.6874L16.37 17.468ZM14.551 18.52L14.1862 17.5889C13.8762 17.7104 13.647 17.9781 13.5748 18.3031L14.551 18.52ZM14 20H9.99999V22H14V20ZM10.9762 20.7831L10.4252 18.3031L8.4728 18.7369L9.0238 21.2169L10.9762 20.7831ZM9.81315 17.5887C9.2512 17.3689 8.72567 17.0656 8.25435 16.6889L7.00564 18.2511C7.63431 18.7536 8.33528 19.1583 9.08483 19.4513L9.81315 17.5887ZM7.32975 16.5161L4.90575 17.2791L5.50624 19.1869L7.93024 18.4239L7.32975 16.5161ZM6.07201 17.733L4.07201 14.269L2.33997 15.269L4.33997 18.733L6.07201 17.733ZM3.88215 15.5058L5.75415 13.7878L4.40184 12.3142L2.52984 14.0322L3.88215 15.5058ZM6.06686 12.9022C5.97694 12.3048 5.97694 11.6972 6.06686 11.0998L4.08913 10.8022C3.96952 11.5969 3.96952 12.4051 4.08913 13.1998L6.06686 12.9022ZM5.75436 10.2144L3.88236 8.49543L2.52963 9.96857L4.40163 11.6876L5.75436 10.2144ZM4.07201 9.73201L6.07201 6.26801L4.33997 5.26799L2.33997 8.73199L4.07201 9.73201ZM4.90575 6.72186L7.32975 7.48486L7.93024 5.57714L5.50624 4.81414L4.90575 6.72186ZM8.25454 7.31199C8.72609 6.93489 9.25193 6.63123 9.81424 6.4113L9.08574 4.5487C8.33574 4.84204 7.63439 5.24705 7.00545 5.75001L8.25454 7.31199ZM10.4263 5.69651L10.9763 3.21651L9.02371 2.78349L8.47371 5.26349L10.4263 5.69651ZM9.99999 4H14V2H9.99999V4ZM13.0238 3.21689L13.5748 5.69689L15.5272 5.26311L14.9762 2.78311L13.0238 3.21689ZM14.1868 6.41133C14.7488 6.63107 15.2743 6.93444 15.7457 7.31116L16.9943 5.74884C16.3657 5.24638 15.6647 4.84176 14.9152 4.54867L14.1868 6.41133ZM16.6702 7.48386L19.0942 6.72086L18.4937 4.81314L16.0697 5.57614L16.6702 7.48386ZM17.928 6.26701L19.928 9.73101L21.66 8.73099L19.66 5.26699L17.928 6.26701ZM20.1178 8.49424L18.2458 10.2122L19.5981 11.6858L21.4701 9.96776L20.1178 8.49424ZM17.9331 11.0979C18.0231 11.6953 18.0231 12.3027 17.9331 12.9001L19.9108 13.1979C20.0306 12.4031 20.0306 11.5949 19.9108 10.8001L17.9331 11.0979ZM18.2458 13.7858L20.1178 15.5038L21.4701 14.0302L19.5981 12.3122L18.2458 13.7858ZM19.928 14.267L17.928 17.731L19.66 18.731L21.66 15.267L19.928 14.267ZM19.0942 17.2771L16.6702 16.5141L16.0697 18.4219L18.4937 19.1849L19.0942 17.2771ZM15.7449 16.6874C15.2737 17.0648 14.7482 17.3687 14.1862 17.5889L14.9158 19.4511C15.6655 19.1573 16.3665 18.7519 16.9951 18.2486L15.7449 16.6874ZM13.5748 18.3031L13.0238 20.7831L14.9762 21.2169L15.5272 18.7369L13.5748 18.3031ZM14 12C14 13.1046 13.1046 14 12 14V16C14.2091 16 16 14.2091 16 12H14ZM12 14C10.8954 14 9.99999 13.1046 9.99999 12H7.99999C7.99999 14.2091 9.79085 16 12 16V14ZM9.99999 12C9.99999 10.8954 10.8954 10 12 10V8C9.79085 8 7.99999 9.79086 7.99999 12H9.99999ZM12 10C13.1046 10 14 10.8954 14 12H16C16 9.79086 14.2091 8 12 8V10Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=logout] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 22C4.73478 22 4.48043 21.8946 4.29289 21.7071C4.10536 21.5196 4 21.2652 4 21V3C4 2.73478 4.10536 2.48043 4.29289 2.29289C4.48043 2.10536 4.73478 2 5 2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V6H18V4H6V20H18V18H20V21C20 21.2652 19.8946 21.5196 19.7071 21.7071C19.5196 21.8946 19.2652 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z' fill='%23333333'/></svg>");
}
.user-tool[data-user-tool=user] .tool-icon {
  display: inline-block;
  vertical-align: middle; /* 或 top, bottom */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 22C10.488 22.0043 8.99521 21.6622 7.63599 21C7.13855 20.758 6.66193 20.4754 6.21099 20.155L6.07399 20.055C4.83383 19.1396 3.81989 17.9522 3.10999 16.584C2.37573 15.1679 1.9949 13.5952 1.99999 12C1.99999 6.477 6.47699 2 12 2C17.523 2 22 6.477 22 12C22.005 13.5944 21.6246 15.1664 20.891 16.582C20.1821 17.9494 19.1696 19.1364 17.931 20.052C17.464 20.394 16.968 20.695 16.449 20.952L16.369 20.992C15.0089 21.6577 13.5142 22.0026 12 22ZM12 17C11.265 16.9986 10.5439 17.2002 9.91629 17.5825C9.28863 17.9649 8.77879 18.5132 8.44299 19.167C9.54874 19.7147 10.766 19.9996 12 19.9996C13.2339 19.9996 14.4512 19.7147 15.557 19.167V19.162C15.2208 18.5089 14.7107 17.9615 14.083 17.58C13.4554 17.1985 12.7345 16.9978 12 17ZM12 15C13.0642 15.0012 14.1089 15.2847 15.0278 15.8216C15.9466 16.3585 16.7065 17.1295 17.23 18.056L17.244 18.043L17.258 18.031L17.241 18.046L17.231 18.054C18.4659 16.9871 19.345 15.5681 19.7503 13.9873C20.1556 12.4065 20.0678 10.7396 19.4986 9.21011C18.9295 7.68065 17.9061 6.36184 16.566 5.43062C15.2258 4.4994 13.6329 4.00031 12.001 4.00031C10.3691 4.00031 8.77616 4.4994 7.436 5.43062C6.09583 6.36184 5.07252 7.68065 4.50334 9.21011C3.93416 10.7396 3.84635 12.4065 4.25167 13.9873C4.657 15.5681 5.53609 16.9871 6.77099 18.054C7.29483 17.1279 8.05488 16.3574 8.97365 15.8209C9.89243 15.2844 10.937 15.0011 12.001 15H12ZM12 14C10.9391 14 9.92171 13.5786 9.17156 12.8284C8.42142 12.0783 7.99999 11.0609 7.99999 10C7.99999 8.93913 8.42142 7.92172 9.17156 7.17157C9.92171 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10C16 11.0609 15.5786 12.0783 14.8284 12.8284C14.0783 13.5786 13.0609 14 12 14ZM12 8C11.4696 8 10.9608 8.21071 10.5858 8.58579C10.2107 8.96086 9.99999 9.46957 9.99999 10C9.99999 10.5304 10.2107 11.0391 10.5858 11.4142C10.9608 11.7893 11.4696 12 12 12C12.5304 12 13.0391 11.7893 13.4142 11.4142C13.7893 11.0391 14 10.5304 14 10C14 9.46957 13.7893 8.96086 13.4142 8.58579C13.0391 8.21071 12.5304 8 12 8Z' fill='%232CA6E0'/></svg>");
}
.user-tool[data-user-tool=profile] {
  display: flex;
  align-items: center;
}
.user-tool[data-user-tool=profile] .user-profile-img {
  width: 48px;
  height: 48px;
  margin-right: 8px;
}
.user-tool[data-user-tool=logout] {
  border-top: 1px solid #333333;
}

.user-tool:not([data-user-tool=search]) {
  opacity: 1;
  transition: all 0.3s ease;
}
.user-tool .tool-icon:hover {
  opacity: 0.5;
  transition: all 0.3s ease;
}

.user-profile {
  /* width: 40px; */
  /* height: 40px; */
  cursor: pointer;
}
.user-profile img {
  width: 100%;
  height: 100%;
}
.user-profile .dropdown-btn {
  margin-left: auto;
}
.user-profile .user-profile-img {
  border-radius: 50%;
  border: 1px solid #f2f2f2;
  width: 48px;
  height: 48px;
}
.user-profile .user-profile-img:hover {
  box-shadow: 0px 0px 0px 3px #2ca6e0;
  transition: all 0.2s ease;
}
.user-tool.withtext {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  /* padding: 0 4px 5px 4px; */
}
.user-tool.withtext:hover {
  opacity: 0.5;
  transition: all 0.3s ease;
}
.user-profile.login {
  color: #2CA6E0;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  /* border: 1px solid #CCCCCC; */
  /* border-radius:1.5rem; */
  /* padding: 0 4px 5px 4px; */
}
@media (max-width: 800px) {
  .user-profile.login {
    flex-direction: row;
  }
}

.main-menu {
  display: flex;
  align-items: center;
}

.main-links {
  display: flex;
  gap: 20px;
}
.main-links .main-link {
  position: relative;
  padding: 12px 4px;
}
.main-links .main-link > a {
  position: relative;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .main-links {
    gap: 3px;
    padding: 8px 0;
  }
}

.lang-dropdown {
  width: 100%;
  cursor: pointer;
  position: relative;
}
.lang-dropdown .lang-list-items {
  display: none;
}
.lang-dropdown .dropdown-btn {
  width: 24px;
  height: 24px;
  display: inline-block;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 11V4H11V11H4V13H11V20H13V13H20V11H13Z' fill='%23333333'/></svg>");
}
.lang-dropdown.is-active .dropdown-btn {
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='4' y='11' width='16' height='2' fill='%23333333'/></svg>");
}
.lang-dropdown.is-active .lang-list-items {
  display: block;
}

@media (min-width: 801px) {
  header .lang-list-items {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1;
    background-color: #333333;
    color: #FFFFFF;
    padding: 6px 4px;
    margin-bottom: 0;
  }
  header .lang-list-items .lang-list-item {
    padding: 8px 16px;
    text-decoration: none;
  }
  header .lang-list-items .lang-list-item:hover {
    text-decoration: underline;
  }
}
.sub-list-links {
  position: absolute;
  top: calc(100% - 4px);
  left: -16px;
  background-color: #FFFFFF;
  padding: 16px;
  min-width: 280px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  display: none;
}

.sub-list-link {
  padding: 4px 6px;
}
.sub-list-link > a {
  width: 100%;
  display: inline-block;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.sub-list-link:hover > a {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

@media (min-width: 801px) {
  .main-link:hover .sub-list-links {
    display: inline-block;
  }
}
.main-link > a {
  opacity: 1;
  transition: opacity 0.3s ease;
}
.main-link > a::after {
  content: "";
  display: inline-block;
  width: 0%;
  height: 2px;
  background-color: #333333;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  transition: all 0.3s ease;
}
.main-link > a:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.main-link > a:hover::after {
  width: 100%;
  transition: all 0.3s ease;
}

@media (max-width: 800px) {
  .main-link > a {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .main-link > a::after {
    display: none;
  }
  .main-link > a:hover {
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }
  .main-link > a:hover::after {
    width: 100%;
    transition: all 0.3s ease;
  }
  .main-link.is-active .sub-list-links {
    display: block;
  }
  .sub-list-links {
    position: static;
    top: calc(100% - 4px);
    left: -16px;
    background-color: #FFFFFF;
    padding: 16px;
    min-width: 180px;
    box-shadow: unset;
    border-radius: 6px;
    display: none;
  }
  .sub-list-link {
    padding: 16px 6px 16px 32px;
  }
  .sub-list-link > a {
    width: 100%;
    display: inline-block;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .sub-list-link:hover > a {
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }
}
.header-user-menu {
  display: none;
  color: #333333;
  font-size: 1rem;
}
@media (min-width: 1025px) {
  .header-user-menu {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200px;
    transform: translate(calc(-50% - 2rem), 100%);
    padding: 15px;
  }
  .header-user-menu.size-sm {
    width: 160px;
  }
}
@media (min-width: 1025px) and (min-width: 1281px) {
  .header-user-menu {
    transform: translate(-50%, 100%);
  }
  .min-header .header-user-menu {
    transform: translate(calc(-50% - 2rem), 100%);
  }
}
@media (min-width: 1025px) {
  .min-header .header-user-menu {
    transform: translate(calc(-50% - rem), 100%);
  }
  .header-user-menu:after {
    content: "";
    position: absolute;
    display: block;
    top: 8px;
    left: calc(50% - 4px);
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #FFFFFF transparent;
    transform: translateX(2rem);
  }
}
@media (min-width: 1025px) and (min-width: 1281px) {
  .header-user-menu:after {
    transform: translateX(0);
  }
}
@media (min-width: 1025px) {
  .min-header .header-user-menu:after {
    transform: translateX(2rem);
  }
}
@media (max-width: 1024px) {
  .header-user-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    justify-content: flex-end;
    z-index: 50;
  }
}
.header-user-menu.is-active {
  display: flex;
}

@media (max-width: 1024px) {
  .header-user-menu-mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: -1;
  }
}

@media (min-width: 801px) {
  .user-tools {
    position: relative;
  }
  .header-search-box {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    width: 300px;
    height: 120px;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 40px 16px 6px;
  }
  .header-search-box input[type=text] {
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 28px;
    outline: 0;
    height: 48px;
    box-sizing: border-box;
    padding: 12px 12px 12px 24px;
  }
  .header-search-box[data-user-tool=search] .tool-icon {
    width: 44px;
    height: 44px;
    background-color: #333333;
    padding: 10px;
    border-radius: 50%;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.867 18 18 14.867 18 11C18 7.132 14.867 4 11 4C7.132 4 4 7.132 4 11C4 14.867 7.132 18 11 18ZM19.485 18.071L22.314 20.899L20.899 22.314L18.071 19.485L19.485 18.071Z' fill='%23ffffff'/></svg>");
    background-size: 50%;
    position: absolute;
    top: calc(50% + 16px);
    right: 24px;
    transform: translateY(-50%);
  }
  .search-title {
    position: absolute;
    top: 16px;
  }
}
.header-search-close {
  position: relative;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  transform: scale(0.8);
  transition: 0.3s;
}
@media (min-width: 1025px) {
  .header-search-close {
    margin-right: 1rem;
    margin-left: auto;
  }
}
.header-search-close:hover {
  transform: scale(1);
}
.header-search-close:after, .header-search-close:before {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: 0.3s;
}
.header-search-close:before {
  transform: rotate(45deg);
}
.header-search-close:after {
  transform: rotate(-45deg);
}

@media (min-width: 801px) {
  .user-profile {
    position: relative;
  }
  .user-profile .user-dropdown-list {
    display: none;
    position: absolute;
    box-sizing: border-box;
    min-width: 300px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    top: 100%;
    right: 0;
    border-radius: 12px;
    overflow: hidden;
  }
  .user-profile.is-active .user-dropdown-list {
    display: block;
  }
  .user-profile .user-dropdown-list-item {
    background-color: #FFFFFF;
  }
  .user-profile .user-dropdown-list-item .user-tool {
    display: flex;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    padding: 12px;
  }
  .user-profile .user-dropdown-list-item:nth-child(1) {
    border-bottom: 1px solid #333333;
  }
  .user-profile .user-dropdown-list-item:hover {
    background-color: #F6F8FA;
  }
}
@media (max-width: 800px) {
  .nav-dropdown .dropdown-btn {
    width: 24px;
    height: 24px;
    display: inline-block;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 11V4H11V11H4V13H11V20H13V13H20V11H13Z' fill='%23333333'/></svg>");
  }
  .nav-dropdown.is-active .dropdown-btn {
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='4' y='11' width='16' height='2' fill='%23333333'/></svg>");
  }
  .nav-dropdown.is-active .lang-list-items {
    display: block;
  }
  .header-right {
    background-color: #FFFFFF;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    z-index: 998;
    position: absolute;
    top: 72px;
    right: 0;
    height: calc(100vh - 72px);
	padding-bottom:72px;
    flex-direction: column;
    align-items: flex-end;
    overflow-y: auto;
  }
  .header-right::-webkit-scrollbar {
    width: 6px;
  }
  .header-right::-webkit-scrollbar-track {
    width: 8px;
    background-color: #F6F8FA;
  }
  .header-right::-webkit-scrollbar-thumb {
    width: 6px;
    background-color: #757575;
    border-radius: 2px;
  }
  .header-right.hidden {
    display: none;
  }
  .main-menu {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  .main-links {
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    gap: 0;
    order: 1;
  }
  .main-link {
    box-sizing: border-box;
    padding: 16px 0px;
    border-bottom: 1px solid #f2f4fe;
  }
  .sub-menu {
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
  }
  .sub-menu .app-download {
    width: 100%;
  }
  .sub-menu .social-media-links {
    width: 100%;
    justify-content: space-around;
    min-height: 36px;
    padding: 18px 0;
    border-bottom: 1px solid #F2F4F6;
  }
  .sub-menu .social-media-links .social-icon {
    width: 36px;
    height: 36px;
  }
  .header-logout-mobile {
    width: 100%;
    opacity: 1;
    transition: all 0.3s ease;
  }
  .header-logout-mobile .tool-icon {
    width: 24px;
    height: 24pxx;
	vertical-align: middle;
	margin-right: 8px;
  }
  .header-logout-mobile a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 0;
  }
  .header-logout-mobile:hover {
    opacity: 0.5;
    transition: all 0.3s ease;
  }
  .user-profile {
    width: 100%;
    height: auto;
    outline: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }
  .user-profile .user-profile-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
	/* padding-bottom:16px; */
  }
  .user-profile .user-dropdown-list {
    display: none;
  }
  .user-profile .user-dropdown-list-item {
    padding: 16px 16px 16px 48px;
    opacity: 1;
    transition: all 0.3s ease;
  }
  .user-profile .user-dropdown-list-item:nth-child(2) {
    padding-top: 32px; /* 第一個項目的 padding-top */
  }
  .user-profile .user-dropdown-list-item .user-tool {
    border-bottom: 0;
  }
  .user-profile .user-dropdown-list-item:hover {
    opacity: 0.5;
    transition: all 0.3s ease;
  }
  .user-profile .user-profile-img {
    width: 48px;
    height: 48px;
    margin-right: 12px;
  }
  .user-profile.is-active .user-dropdown-list {
    display: block;
  }
  .user-tools {
    width: 100%;
    flex-direction: column-reverse;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 8px 16px;
    gap: 0;
    order: 0;
  }
  .user-tools .user-tool, .user-tools .user-profile {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 0;
    border-bottom: 1px solid #f2f4fe;
  }
  .user-tools .user-tool .tool-txt, .user-tools .user-profile .tool-txt {
    display: inline-block;
    vertical-align: middle;
  }
  .user-tools .user-tool .tool-icon, .user-tools .user-profile .tool-icon {
    vertical-align: middle;
    margin-right: 8px;
  }
  /* .user-tool.unread::after { */
    /* top: calc(12% + 10px); */
    /* right: calc(100% - 26px); */
  /* } */
  .header-app .divider-vertical {
    display: none;
  }
  .mobile-nav-logo {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background-color: #FFFFFF;
  }
  .mobile-nav-logo a {
    display: inline-block;
    width: 120px;
    height: 48px;
  }
  .mobile-nav-logo a img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .user-tool[data-user-tool=search] {
    border: 1px solid #333333;
    border-radius: 32px;
    overflow: hidden;
    height: 56px;
    box-sizing: border-box;
    padding: 8px 8px 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
  }
  .user-tool[data-user-tool=search]:focus {
    border: 2px solid #333333;
  }
  .user-tool[data-user-tool=search] input {
    border: 0;
    font-size: 1rem;
    letter-spacing: 0.1px;
    line-height: 28px;
    flex: 1;
    min-width: 0;
  }
  .user-tool[data-user-tool=search] input:focus {
    border: 0;
    outline: 0;
  }
  .user-tool[data-user-tool=search] .tool-icon {
    background-color: #333333;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 12px;
    box-sizing: border-box;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.867 18 18 14.867 18 11C18 7.132 14.867 4 11 4C7.132 4 4 7.132 4 11C4 14.867 7.132 18 11 18ZM19.485 18.071L22.314 20.899L20.899 22.314L18.071 19.485L19.485 18.071Z' fill='%23ffffff'/></svg>");
    background-size: 50%;
    margin-right: 0;
  }
  .lang-dropdown {
    width: 100%;
  }
  .lang-select {
    width: 100%;
    display: flex;
    padding: 16px 0;
  }
  .lang-select .dropdown-btn {
    margin-left: auto;
  }
  .lang-select .lang-icon {
    width: 24px;
    height: 24px;
  }
  .lang-select .lang-txt {
    margin-left: 4px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", Helvetica, sans-serif;
    font-weight: 500;
    /* line-height: 32px; */
  }
  .lang-list-item {
    cursor: pointer;
    padding: 16px 0 16px 56px;
    opacity: 1;
    transition: all 0.3s ease;
  }
  .lang-list-item:hover {
    opacity: 0.5;
    transition: all 0.3s ease;
  }
}
footer {
  background-color: #fff;
  /* margin-top: 48px; */
}
@media (max-width: 800px) {
  footer .footer-container {
    padding: 0 16px;
  }
}
@media (max-width: 800px) {
  footer {
    margin-top: 0px;
  }
}

.footer-main {
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 24px 0;
  border-bottom: 1px solid #E2E2E2;
}
@media (max-width: 800px) {
  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border-bottom: 0;
  }
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-info h2 {
  letter-spacing: 0.1rem;
  line-height: 30px;
  font-weight: 500;
}
@media (max-width: 800px) {
  .footer-info {
    order: 1;
  }
}

.footer-logo {
  width: 240px;
  /* height: 72px; */
}
.footer-logo a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.footer-logo a img {
  width: 100%;
  height: 100%;
  display: inline-block;
  -o-object-fit: cover;
     object-fit: cover;
}

.footer-contact {
  color: #757575;
  transition: color 0.3s ease-in;
}
.footer-contact * {
  display: block;
  margin-bottom: 2px;
  width: -moz-fit-content;
  width: fit-content;
}
.footer-contact a:hover {
  color: #333333;
  transition: color 0.3s ease-in;
}

.footer-links {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  gap: 36px;
}

@media (max-width: 800px) {
  .footer-links {
    width: 100%;
    flex-direction: column;
    gap: 0;
    order: 0;
    border-bottom: 1px solid #E2E2E2;
  }
}

.footer-link {
  opacity: 1;
  transition: opacity 0.3s ease-in;
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  margin-bottom:15px;
}
.footer-link:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease-in;
}
@media (max-width: 800px) {
  .footer-link {
    margin-bottom: 16px;
    gap: 4px;
  }
}

.footer-link-title {
  letter-spacing: 0.1rem;
  font-weight: 500;
}
@media (max-width: 800px) {
  .footer-link-title {
    font-size: 1.125rem;
  }
}

.footer-link-title-en {
  font-size: 0.875rem;
  font-weight: 300;
  letter-spacing: 0;
  color: #757575;
}

@media (max-width: 800px) {
  .footer-apps {
    width: 100%;
    order: 2;
  }
}

.app-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.footer-base {
  box-sizing: border-box;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 800px) {
  .footer-base {
    flex-direction: column;
    align-items: flex-start;
  }
}

.footer-policy .copy-right {
  color: #999;
}
@media (max-width: 800px) {
  .footer-policy {
    order: 1;
	margin-top:20px;
  }
}

.policy-links {
  display: flex;
  gap: 20px;
  margin-bottom: 0.5rem;
}
.policy-links .policy-link {
  width: -moz-fit-content;
  width: fit-content;
}
.policy-links .policy-link > a {
  color: #757575;
  opacity: 1;
  transition: opacity 0.3s ease-in;
}
.policy-links .policy-link > a:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease-in;
}
@media (max-width: 800px) {
  .policy-links {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 1rem;
  }
}

.pop-download-btn {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #333333;
  color: #FFFFFF !important;
  opacity: 1;
  transition: all 0.3s ease;
}
.pop-download-btn::before {
  content: "";
  width: 32px;
  height: 32px;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 6V8H5V19H16V14H18V20C18 20.2652 17.8946 20.5196 17.7071 20.7071C17.5196 20.8946 17.2652 21 17 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V7C3 6.73478 3.10536 6.48043 3.29289 6.29289C3.48043 6.10536 3.73478 6 4 6H10ZM21 3V11H19V6.413L11.207 14.207L9.793 12.793L17.585 5H13V3H21Z' fill='%23ffffff'/></svg>");
  vertical-align: middle;
  margin-right: 8px;
}
.pop-download-btn:hover {
  opacity: 0.5;
  transition: all 0.3s ease;
}

@media (max-width: 800px) {
  footer .social-media-links {
    box-sizing: border-box;
    padding: 0 32px;
    justify-content: space-around;
  }
  footer .social-media-links .social-media-link .social-icon {
    width: 30px;
    height: 30px;
  }
}

@media (min-width: 801px) {
  footer .lang-dropdown {
    width: -moz-fit-content;
    width: fit-content;
  }
  footer .lang-list-items {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    z-index: 1;
    background-color: #333333;
    color: #FFFFFF;
    padding: 6px 4px;
    margin-bottom: 0;
  }
  footer .lang-list-items .lang-list-item {
    padding: 8px 16px;
    text-decoration: none;
  }
  footer .lang-list-items .lang-list-item:hover {
    text-decoration: underline;
  }
}
@media (max-width: 800px) {
  .footer-lang {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 16px;
    border-bottom: 1px solid #E2E2E2;
    margin-bottom: 16px;
  }
  .footer-lang::after {
    content: "";
    width: 32px;
    height: 32px;
    margin-left: auto;
    min-width: 32px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 11V4H11V11H4V13H11V20H13V13H20V11H13Z' fill='%23333333'/></svg>");
    transition: all 0.3s ease;
  }
  .footer-lang:hover::after {
    content: "";
    width: 32px;
    height: 32px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13 11V4H11V11H4V13H11V20H13V13H20V11H13Z' fill='%232CA6E0'/></svg>");
    transition: all 0.3s ease;
  }
}
.back-to-top {
  position: fixed;
  bottom: 90px;
  right: 30px;
  font-size: 54px;
  z-index: 998;
  background-color: rgba(51, 51, 51, 0.7);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: 0.45s;
  cursor: pointer;
}
@media (max-width: 800px) {
  .back-to-top {
    bottom: 55px;
    right: 7px;
    font-size: 44px;
  }
}
@media (min-width: 801px) {
  .back-to-top:hover {
    background-color: #333333;
  }
}
.back-to-top.is-active {
  opacity: 1;
  transform: scale(1);
}
.back-to-top .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}
.back-to-top .icon:before {
  content: "";
  width: 0.35em;
  height: 0.35em;
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 11.828L9.17196 14.657L7.75696 13.243L12 9L16.243 13.243L14.828 14.657L12 11.828Z' fill='%23ffffff'/></svg>");
}

.visually-hidden {
	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 閃爍背景效果 */
.img-loading {
  background: #f0f0f0;
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}