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

/* Bold */
body[data-theme=light] {
  --black-100: var(--grayscale-white);
  --black-90: var(--grayscale-white);
  --black-80: var(--grayscale-10);
  --black-70: var(--grayscale-20);
  --black-60: var(--grayscale-40);
  --black-40: var(--grayscale-60);
  --black-20: var(--grayscale-70);
  --black-10: var(--grayscale-80);
  --black-white: #383838;
  --color-blue-for-dark: var(--color-blue-secondary);
  --color-blue-for-light: var(--color-blue-primary);
  --color-red-for-dark: var(--color-red-secondary);
  --color-red-for-light: var(--color-red-primary);
  --color-green-for-dark: var(--color-green-secondary);
  --color-green-for-light: var(--color-green-primary);
  --logo-filter: brightness(1) grayscale(0%);
}
body[data-theme=light] [class^=icon-]::before, body[data-theme=light] [class*=" icon-"]::before {
  content: " ";
  filter: invert(1);
}

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

.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: 20px;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.5px;
}
#cookie_noti > div h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}
#cookie_noti > div p {
  font-size: 14px;
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.5px;
}
#cookie_noti > div .btn {
  background-color: var(--black-white);
  color: var(--black-90);
  font-size: 16px;
  font-weight: 700;
  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-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M12.5352%204.04991C12.9256%203.65955%2013.5588%203.6598%2013.9493%204.04991C14.3398%204.44044%2014.3398%205.07443%2013.9493%205.46495L10.4142%208.99913L13.9493%2012.5353C14.3398%2012.9258%2014.3398%2013.5588%2013.9493%2013.9493C13.5588%2014.3399%2012.9258%2014.3399%2012.5352%2013.9493L8.99912%2010.4142L5.46494%2013.9493C5.07441%2014.3399%204.44042%2014.3399%204.0499%2013.9493C3.65978%2013.5588%203.65954%2012.9257%204.0499%2012.5353L7.58505%208.99913L4.0499%205.46495C3.65937%205.07443%203.65937%204.44044%204.0499%204.04991C4.44042%203.65939%205.07441%203.65939%205.46494%204.04991L8.99912%207.58507L12.5352%204.04991Z%22%20fill%3D%22%23ffffff%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-size: cover;
  cursor: pointer;
}
#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;
  color: var(--black-100);
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33106%207.25683C2.74155%206.88739%203.3737%206.92059%203.74317%207.33105L12%2016.5049L20.2568%207.33105C20.6263%206.92059%2021.2585%206.88739%2021.6689%207.25683C22.0794%207.6263%2022.1126%208.25845%2021.7432%208.66894L12%2019.4951L2.25684%208.66894C1.8874%208.25845%201.9206%207.6263%202.33106%207.25683Z%22%20fill%3D%22%23000000%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center left 4px;
  filter: invert(1);
}
#cookie_noti #customize-cookie-noti-content ul li div h3.expanded {
  background-image: url("data:image/svg+xml,%0A%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M2.33105%2016.7432C2.74155%2017.1126%203.3737%2017.0794%203.74316%2016.6689L12%207.49512L20.2568%2016.6689C20.6263%2017.0794%2021.2585%2017.1126%2021.6689%2016.7432C22.0794%2016.3737%2022.1126%2015.7415%2021.7432%2015.3311L12%204.50488L2.25684%2015.3311C1.88739%2015.7415%201.9206%2016.3737%202.33105%2016.7432Z%22%20fill%3D%22%23000000%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
#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;
  }
}/*# sourceMappingURL=floats.css.map */