@charset "UTF-8";
@import url("../fonts/fonts.css");
:root {
  --black-100: #000000;
  --black-90: #232323;
  --black-80: #383838;
  --black-70: #4b4b4b;
  --black-60: #979797;
  --black-40: #d8d8d8;
  --black-20: #f2f2f2;
  --black-10: #f6f6f6;
  --black-white: #ffffff;
  --color-blue-for-dark: #009ff4;
  --color-blue-for-light: #0192df;
  --color-red-for-dark: #ff6565;
  --color-red-for-light: #c63939;
  --color-green-for-dark: #00d83a;
  --color-green-for-light: #048000;
  --logo-filter: brightness(100) grayscale(100%);
  --font-family-primary: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
}

body[data-theme=light] {
  --black-100: #ffffff;
  --black-90: #ffffff;
  --black-80: #f6f6f6;
  --black-70: #f2f2f2;
  --black-60: #d8d8d8;
  --black-40: #979797;
  --black-20: #4b4b4b;
  --black-10: #383838;
  --black-white: #383838;
  --color-blue-for-dark: #0192df;
  --color-blue-for-light: #009ff4;
  --color-red-for-dark: #c63939;
  --color-red-for-light: #ff6565;
  --color-green-for-dark: #048000;
  --color-green-for-light: #00d83a;
  --logo-filter: brightness(1) grayscale(0%);
}

body[data-lang=ZHTW] {
  --font-family-primary: "Noto Sans TC", "Noto Sans SC", "Roboto", -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Microsoft YaHei", "微軟雅黑", "Microsoft JhengHei", "微軟正黑體", "Hiragino Sans GB", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
}

body[data-lang=ZHCN] {
  --font-family-primary: "Noto Sans SC", "Noto Sans TC", "Roboto", -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "Microsoft YaHei", "微軟雅黑", "Microsoft JhengHei", "微軟正黑體", "Hiragino Sans GB", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
}

body {
  font-family: var(--font-family-primary);
}

.btn {
  display: inline-block;
  border-radius: 100rem;
  padding: 8px 24px;
  font-size: 20px;
  font-weight: bold;
  line-height: 130%;
  cursor: pointer;
  outline: none;
  border: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin-left: 16px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch input:checked + label {
  background-color: var(--color-blue-for-dark);
}
.toggle-switch input:checked + label:before {
  transform: translateX(20px);
}
.toggle-switch input:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle-switch label {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--black-60);
  transition: 0.3s;
  border-radius: 24px;
}
.toggle-switch label:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--black-white);
  transition: 0.3s;
  border-radius: 50%;
}

input, label, select, textarea, button, img, a {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

#cookie_noti {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: none;
  opacity: 1 !important;
}
#cookie_noti.show {
  display: block;
}
#cookie_noti > div {
  background-color: var(--black-90);
  color: var(--black-white);
}
#cookie_noti > div h2 {
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  line-height: 135%;
  letter-spacing: 0.5px;
}
@media (max-width: 720px) {
  #cookie_noti > div h2 {
    font-size: 18px;
  }
}
#cookie_noti > div h3 {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 140%;
  letter-spacing: 0.5px;
}
@media (max-width: 720px) {
  #cookie_noti > div h3 {
    font-size: 16px;
  }
}
#cookie_noti > div p {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  line-height: 140%;
  letter-spacing: 0.5px;
}
#cookie_noti > div .btn {
  background-color: var(--black-white);
  color: var(--black-90);
}
#cookie_noti > div .btn {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 140%;
  letter-spacing: 0.5px;
}
#cookie_noti > div .btn:hover {
  color: var(--color-blue-for-light);
}
#cookie_noti > div .btn:active {
  background-color: var(--color-blue-for-light);
  color: var(--black-white);
}
#cookie_noti #default-cookie-noti-content {
  position: fixed;
  z-index: 2147483646;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 24px max(40px, (100vw - 1920px) / 2);
  box-sizing: border-box;
  text-align: right;
}
#cookie_noti #default-cookie-noti-content .btn {
  margin-left: 16px;
}
#cookie_noti #default-cookie-noti-content p {
  margin-bottom: 16px;
  width: 100%;
  text-align: left;
}
#cookie_noti #customize-cookie-noti-content {
  display: none;
  position: fixed;
  z-index: 2147483646;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 600px;
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-align: right;
}
#cookie_noti #customize-cookie-noti-content #back-to-default {
  position: absolute;
  top: 24px;
  right: 16px;
  width: 24px;
  height: 24px;
  background-size: cover;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22%23ffffff%22%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%3e%0a%3cpath%20d%3d%22M12%2013.4L7.09999%2018.3C6.91665%2018.4833%206.68332%2018.575%206.39999%2018.575C6.11665%2018.575%205.88332%2018.4833%205.69999%2018.3C5.51665%2018.1167%205.42499%2017.8833%205.42499%2017.6C5.42499%2017.3167%205.51665%2017.0833%205.69999%2016.9L10.6%2012L5.69999%207.09999C5.51665%206.91665%205.42499%206.68332%205.42499%206.39999C5.42499%206.11665%205.51665%205.88332%205.69999%205.69999C5.88332%205.51665%206.11665%205.42499%206.39999%205.42499C6.68332%205.42499%206.91665%205.51665%207.09999%205.69999L12%2010.6L16.9%205.69999C17.0833%205.51665%2017.3167%205.42499%2017.6%205.42499C17.8833%205.42499%2018.1167%205.51665%2018.3%205.69999C18.4833%205.88332%2018.575%206.11665%2018.575%206.39999C18.575%206.68332%2018.4833%206.91665%2018.3%207.09999L13.4%2012L18.3%2016.9C18.4833%2017.0833%2018.575%2017.3167%2018.575%2017.6C18.575%2017.8833%2018.4833%2018.1167%2018.3%2018.3C18.1167%2018.4833%2017.8833%2018.575%2017.6%2018.575C17.3167%2018.575%2017.0833%2018.4833%2016.9%2018.3L12%2013.4Z%22%20fill%3d%22%23ffffff%22%2f%3e%0a%3c%2fsvg%3e%0a") !important;
}
#cookie_noti #customize-cookie-noti-content h2 {
  text-align: left;
  border-bottom: 1px solid var(--black-60);
  padding-bottom: 16px;
  margin-bottom: 16px;
  width: calc(100% + 48px);
  margin-left: -24px;
  padding-left: 24px;
}
#cookie_noti #customize-cookie-noti-content > p, #cookie_noti #customize-cookie-noti-content > ul {
  text-align: left;
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}
#cookie_noti #customize-cookie-noti-content > p::-webkit-scrollbar, #cookie_noti #customize-cookie-noti-content > ul::-webkit-scrollbar {
  background-color: var(--black-70);
  opacity: 1;
  height: 2px;
  width: 2px;
  margin-left: -4px;
}
#cookie_noti #customize-cookie-noti-content > p::-webkit-scrollbar-thumb:vertical, #cookie_noti #customize-cookie-noti-content > ul::-webkit-scrollbar-thumb:vertical {
  background-color: var(--black-20);
  border-radius: 10px;
}
#cookie_noti #customize-cookie-noti-content ul {
  margin: 16px 0 24px;
  border-radius: 8px;
  background-color: var(--black-70);
  padding-right: 0;
}
#cookie_noti #customize-cookie-noti-content ul li {
  padding: 12px;
  position: relative;
}
#cookie_noti #customize-cookie-noti-content ul li .toggle-switch {
  position: absolute;
  top: 13px;
  right: 16px;
}
#cookie_noti #customize-cookie-noti-content ul li:not(:last-child) {
  border-bottom: 1px solid var(--black-90);
}
#cookie_noti #customize-cookie-noti-content ul li div {
  position: relative;
}
#cookie_noti #customize-cookie-noti-content ul li div p {
  height: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0 0 0 32px;
  transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#cookie_noti #customize-cookie-noti-content ul li div h3 {
  width: 100%;
  text-align: left;
  padding-left: 32px;
  cursor: pointer;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center left 4px;
  background-image: url("data:image/svg+xml,%3csvg%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22%23ffffff%22%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%3e%0a%3cpath%20d%3d%22M12%2014.55L19.2875%207.26248C19.5208%207.02914%2019.7958%206.91456%2020.1125%206.91873C20.4291%206.92289%2020.7041%207.04164%2020.9375%207.27498C21.1708%207.50831%2021.2875%207.78331%2021.2875%208.09998C21.2875%208.41664%2021.1708%208.69164%2020.9375%208.92498L13.325%2016.55C13.1333%2016.7416%2012.925%2016.8812%2012.7%2016.9687C12.475%2017.0562%2012.2416%2017.1%2012%2017.1C11.7583%2017.1%2011.525%2017.0562%2011.3%2016.9687C11.075%2016.8812%2010.8666%2016.7416%2010.675%2016.55L3.04998%208.92498C2.81664%208.69164%202.70206%208.41456%202.70623%208.09373C2.71039%207.77289%202.82914%207.49581%203.06248%207.26248C3.29581%207.02914%203.57081%206.91248%203.88748%206.91248C4.20414%206.91248%204.47914%207.02914%204.71248%207.26248L12%2014.55Z%22%20fill%3d%22%23ffffff%22%2f%3e%0a%3c%2fsvg%3e%0a") !important;
}
#cookie_noti #customize-cookie-noti-content ul li div h3.expanded {
  background-image: url("data:image/svg+xml,%3csvg%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22%23ffffff%22%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%3e%0a%3cpath%20d%3d%22M12%209.46251L4.71251%2016.75C4.47918%2016.9833%204.2021%2017.0979%203.88126%2017.0938C3.56043%2017.0896%203.28335%2016.9708%203.05001%2016.7375C2.81668%2016.5042%202.70001%2016.2271%202.70001%2015.9063C2.70001%2015.5854%202.81668%2015.3083%203.05001%2015.075L10.675%207.46251C10.8667%207.27085%2011.075%207.13126%2011.3%207.04376C11.525%206.95626%2011.7583%206.91251%2012%206.91251C12.2417%206.91251%2012.475%206.95626%2012.7%207.04376C12.925%207.13126%2013.1333%207.27085%2013.325%207.46251L20.95%2015.0875C21.1833%2015.3208%2021.2979%2015.5958%2021.2938%2015.9125C21.2896%2016.2292%2021.1708%2016.5042%2020.9375%2016.7375C20.7042%2016.9708%2020.4271%2017.0875%2020.1063%2017.0875C19.7854%2017.0875%2019.5083%2016.9708%2019.275%2016.7375L12%209.46251Z%22%20fill%3d%22%23ffffff%22%2f%3e%0a%3c%2fsvg%3e%0a") !important;
}
#cookie_noti #customize-cookie-noti-content ul li div h3.expanded ~ p {
  height: -moz-fit-content;
  height: fit-content;
  max-height: 600px;
  padding: 16px 0 16px 32px;
}
#cookie_noti #customize-cookie-noti-content .btn:nth-child(4) {
  float: left;
}
#cookie_noti #customize-cookie-noti-content .btn:nth-child(5) {
  margin-right: 8px;
}
@media screen and (max-width: 720px) {
  #cookie_noti #default-cookie-noti-content {
    padding: 16px;
    text-align: left;
    display: grid;
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
  #cookie_noti #default-cookie-noti-content .btn {
    height: -moz-fit-content;
    height: fit-content;
    margin: 0;
  }
  #cookie_noti #default-cookie-noti-content :nth-child(1) {
    order: 1;
    grid-area: 1/1/2/3;
  }
  #cookie_noti #default-cookie-noti-content :nth-child(2) {
    order: 4;
    grid-area: 3/1/4/3;
  }
  #cookie_noti #default-cookie-noti-content :nth-child(3) {
    order: 2;
    grid-area: 2/1/3/2;
  }
  #cookie_noti #default-cookie-noti-content :nth-child(4) {
    order: 3;
    grid-area: 2/2/3/3;
  }
  #cookie_noti #customize-cookie-noti-content {
    padding: 16px;
    transform: none;
    top: auto;
    left: auto;
    bottom: 0;
    width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 640px;
    padding-top: 24px;
  }
  #cookie_noti #customize-cookie-noti-content h2 {
    width: calc(100% + 32px);
    margin-left: -16px;
    padding-left: 16px;
  }
  #cookie_noti #customize-cookie-noti-content .btn {
    width: calc(50% - 4px);
    margin: 0;
    clear: both;
  }
  #cookie_noti #customize-cookie-noti-content .btn:nth-child(5) {
    margin-right: 0px;
  }
  #cookie_noti #customize-cookie-noti-content .btn:nth-child(6) {
    width: 100%;
    margin-top: 8px;
  }
}

#tmp_noti {
  z-index: 9999;
  position: fixed;
  right: 20px;
  bottom: 88px;
  top: auto;
  background: transparent;
  box-shadow: none;
  width: auto;
  max-width: 50vw;
  border-radius: 54px;
  overflow: hidden;
}
#tmp_noti a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 108px;
  height: 108px;
  border-radius: 54px;
  background-image: linear-gradient(45deg, #1E2254 0%, #5270F0 50%, #6FCBCF 100%);
  box-shadow: 0 0 4px 3px rgba(111, 203, 207, 0.25);
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: all 0.3s ease;
  padding: 0;
}
#tmp_noti a:before {
  content: "";
  position: fixed;
  right: 20px;
  bottom: 88px;
  width: 108px;
  height: 108px;
  border-radius: 54px;
  background: transparent;
}
#tmp_noti a .hover {
  display: none;
}
#tmp_noti:hover {
  border-radius: 0px;
}
#tmp_noti:hover a {
  width: auto;
  height: 42px;
  border-radius: 21px;
  padding: 0 24px;
  margin-bottom: 33px;
}
#tmp_noti:hover a:active {
  background: #5270F0;
}
#tmp_noti:hover a img {
  display: none;
}
#tmp_noti:hover a .hover {
  display: inline;
}

@media screen and (max-width: 960px) {
  #tmp_noti {
    right: 20px;
    bottom: 104px;
    zoom: 0.8;
  }
  #tmp_noti:hover a {
    width: 108px;
    height: 108px;
    border-radius: 54px;
    padding: 0;
    margin-bottom: 0;
  }
  #tmp_noti:hover a img {
    display: inline;
  }
  #tmp_noti:hover a .hover {
    display: none;
  }
}
body[data-theme=light] #cookie_noti #customize-cookie-noti-content ul li div h3 {
  background-image: url("data:image/svg+xml,%3csvg%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22%23232323%22%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%3e%0a%3cpath%20d%3d%22M12%2014.55L19.2875%207.26248C19.5208%207.02914%2019.7958%206.91456%2020.1125%206.91873C20.4291%206.92289%2020.7041%207.04164%2020.9375%207.27498C21.1708%207.50831%2021.2875%207.78331%2021.2875%208.09998C21.2875%208.41664%2021.1708%208.69164%2020.9375%208.92498L13.325%2016.55C13.1333%2016.7416%2012.925%2016.8812%2012.7%2016.9687C12.475%2017.0562%2012.2416%2017.1%2012%2017.1C11.7583%2017.1%2011.525%2017.0562%2011.3%2016.9687C11.075%2016.8812%2010.8666%2016.7416%2010.675%2016.55L3.04998%208.92498C2.81664%208.69164%202.70206%208.41456%202.70623%208.09373C2.71039%207.77289%202.82914%207.49581%203.06248%207.26248C3.29581%207.02914%203.57081%206.91248%203.88748%206.91248C4.20414%206.91248%204.47914%207.02914%204.71248%207.26248L12%2014.55Z%22%20fill%3d%22%23232323%22%2f%3e%0a%3c%2fsvg%3e%0a") !important;
}
body[data-theme=light] #cookie_noti #customize-cookie-noti-content ul li div h3.expanded {
  background-image: url("data:image/svg+xml,%3csvg%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22%23232323%22%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%3e%0a%3cpath%20d%3d%22M12%209.46251L4.71251%2016.75C4.47918%2016.9833%204.2021%2017.0979%203.88126%2017.0938C3.56043%2017.0896%203.28335%2016.9708%203.05001%2016.7375C2.81668%2016.5042%202.70001%2016.2271%202.70001%2015.9063C2.70001%2015.5854%202.81668%2015.3083%203.05001%2015.075L10.675%207.46251C10.8667%207.27085%2011.075%207.13126%2011.3%207.04376C11.525%206.95626%2011.7583%206.91251%2012%206.91251C12.2417%206.91251%2012.475%206.95626%2012.7%207.04376C12.925%207.13126%2013.1333%207.27085%2013.325%207.46251L20.95%2015.0875C21.1833%2015.3208%2021.2979%2015.5958%2021.2938%2015.9125C21.2896%2016.2292%2021.1708%2016.5042%2020.9375%2016.7375C20.7042%2016.9708%2020.4271%2017.0875%2020.1063%2017.0875C19.7854%2017.0875%2019.5083%2016.9708%2019.275%2016.7375L12%209.46251Z%22%20fill%3d%22%23232323%22%2f%3e%0a%3c%2fsvg%3e%0a") !important;
}
body[data-theme=light] #cookie_noti #customize-cookie-noti-content #back-to-default {
  background-image: url("data:image/svg+xml,%3csvg%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22%23232323%22%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%3e%0a%3cpath%20d%3d%22M12%2013.4L7.09999%2018.3C6.91665%2018.4833%206.68332%2018.575%206.39999%2018.575C6.11665%2018.575%205.88332%2018.4833%205.69999%2018.3C5.51665%2018.1167%205.42499%2017.8833%205.42499%2017.6C5.42499%2017.3167%205.51665%2017.0833%205.69999%2016.9L10.6%2012L5.69999%207.09999C5.51665%206.91665%205.42499%206.68332%205.42499%206.39999C5.42499%206.11665%205.51665%205.88332%205.69999%205.69999C5.88332%205.51665%206.11665%205.42499%206.39999%205.42499C6.68332%205.42499%206.91665%205.51665%207.09999%205.69999L12%2010.6L16.9%205.69999C17.0833%205.51665%2017.3167%205.42499%2017.6%205.42499C17.8833%205.42499%2018.1167%205.51665%2018.3%205.69999C18.4833%205.88332%2018.575%206.11665%2018.575%206.39999C18.575%206.68332%2018.4833%206.91665%2018.3%207.09999L13.4%2012L18.3%2016.9C18.4833%2017.0833%2018.575%2017.3167%2018.575%2017.6C18.575%2017.8833%2018.4833%2018.1167%2018.3%2018.3C18.1167%2018.4833%2017.8833%2018.575%2017.6%2018.575C17.3167%2018.575%2017.0833%2018.4833%2016.9%2018.3L12%2013.4Z%22%20fill%3d%22%23232323%22%2f%3e%0a%3c%2fsvg%3e%0a") !important;
}/*# sourceMappingURL=floats.css.map */