/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/assets/css/layout.css ***!
  \***************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap);
/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/assets/css/layout.css (1) ***!
  \*******************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap);
/*!**************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/assets/css/reset.css ***!
  \**************************************************************************************************************************************************************************************************************************/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  text-decoration: none;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button {
  background: none;
  outline: none;
  border: none;
}
html,
body {
  height: 100%;
  width: 100%;
}
/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./src/assets/css/layout.css (2) ***!
  \*******************************************************************************************************************************************************************************************************************************/
:root {
  --font-size: 10px;
  font-weight: 400;
}
*::-webkit-scrollbar {
  width: 3px;
  border-radius: 3px;
}
*::-webkit-scrollbar-track {
  background-color: #e4e7ec;
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb {
  background-color: #98a2b3;
  border-radius: 3px;
}
body {
  font-family: "PingFangHK", "Noto Sans TC", "Noto Sans SC", sans-serif;
  line-height: 1.6;
  color: #344054;
  background-color: #f9fafb;
  -webkit-tap-highlight-color: transparent;
}
body.hidden {
  overflow: hidden;
}
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  width: 80%;
  max-width: 1200px;
  box-sizing: border-box;
  padding-top: calc(13 * var(--font-size));
  margin: 0 auto;
  flex: 1;
}
a {
  font-weight: 500;
  color: #344054;
  transition: all 0.5s;
}
a:hover {
  transition: all 0.5s;
}
button {
  padding: 0;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.5s;
}
button:hover {
  transition: all 0.5s;
}
button[disabled] {
  cursor: default !important;
  color: #98a2b3 !important;
  background-color: #f2f4f7 !important;
}
.cta-btn {
  color: #fcfcfd;
  background-color: #344054;
}
.cta-btn:hover {
  background-color: #1d2939;
}
.border-btn {
  border: 1px solid #344054;
}
.border-btn:hover {
  background-color: #f2f4f7;
}
.ghost-btn {
  box-sizing: border-box;
  color: #344054;
  border: 1px #d0d5dd solid;
  background-color: #fff;
}
.ghost-btn:hover {
  background-color: #e4e7ec;
}
h2 {
  margin-bottom: calc(4 * var(--font-size));
  font-size: calc(2.4 * var(--font-size));
  font-weight: 500;
}
.black-wall {
  width: 100%;
  height: 100%;
  background-color: rgba(16, 24, 40, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
@media screen and (max-width: 820px) {
main {
    width: 70%;
    padding-top: calc(9 * var(--font-size));
}
h2 {
    margin-bottom: calc(3.2 * var(--font-size));
    font-size: calc(1.8 * var(--font-size));
}
}
@media screen and (max-width: 516px) {
main {
    width: 90%;
}
}
.layout-key-vision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.layout-key-vision .sub-banner {
  display: none;
}
.layout-key-vision.have-sub-banner {
  align-items: flex-start;
}
.layout-key-vision.have-sub-banner .key-vision-desc p.txt {
  margin-bottom: calc(4 * var(--font-size));
}
.layout-key-vision.have-sub-banner .sub-banner {
  display: block;
}
@media screen and (max-width: 1200px) {
.layout-key-vision {
    display: block;
    margin: 0 auto;
}
.layout-key-vision.have-sub-banner .key-vision-desc {
    margin-top: 0;
}
.layout-key-vision.have-sub-banner .key-vision-desc p.txt {
    margin-bottom: calc(2.8 * var(--font-size));
}
}
.layout-success-dec {
  position: relative;
  /*
  &::before, &::after{
      content: '';
      display: block;
      background-repeat: no-repeat;
      background-size: 100% auto;
      background-position: center;
  }
  &::before{
      width: calc(4* var(--font-size));
      height: calc(4* var(--font-size));
      background-image: url(../images/dec-success-dec-before.svg);
      position: absolute;
      top: 4vh;
      left: 10vw;
      z-index: -1;
  }
  &::after{
      width: calc(5.4* var(--font-size));
      height: calc(5.4* var(--font-size));
      background-image: url(../images/dec-success-dec-after.svg);
      position: absolute;
      bottom: -5.5vh;
      right: 15vw;
      z-index: -1;
  }
  */
}
.layout-maintenance-dec {
  position: relative;
  font-family: "PingFang HK", "Noto Sans TC", sans-serif;
}
.layout-maintenance-dec h1,
.layout-maintenance-dec h2 {
  font-size: calc(2.4 * var(--font-size));
  font-weight: 700;
  line-height: 1.4;
}
.layout-maintenance-dec p.desc,
.layout-maintenance-dec p.sub-desc {
  font-size: calc(1.6 * var(--font-size)) !important;
}
.layout-maintenance-dec p span {
  display: inline-block;
}
.layout-maintenance-dec h1,
.layout-maintenance-dec p.desc {
  color: #1d2939;
}
.layout-maintenance-dec h2,
.layout-maintenance-dec p.sub-desc {
  color: #667085;
}
@media screen and (max-width: 820px) {
.layout-success-dec {
    margin-bottom: calc(8 * var(--font-size));
}
.layout-success-dec::before {
    width: calc(2.8 * var(--font-size));
    height: calc(2.8 * var(--font-size));
    top: -1vh;
    left: 1vw;
}
.layout-success-dec::after {
    bottom: -5vh;
    right: -3vw;
}
}
.layout-about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px;
  margin-top: 10px;
}
.layout-about h2 {
  flex: 100%;
  text-align: center;
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 500;
  color: #344054;
}
@media screen and (max-width: 820px) {
.layout-about {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 0;
}
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/


/*!***************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-14.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-14.use[2]!./node_modules/vue3-lottie/dist/style.css ***!
  \***************************************************************************************************************************************************************************************/
.lottie-animation-container{width:var(--lottie-animation-container-width);height:var(--lottie-animation-container-height);background-color:var(--lottie-animation-container-background-color);overflow:hidden;margin:0 auto}