@charset "UTF-8";
/* 根據螢幕寬度調整根字體大小 */
html {
  font-size: clamp(12px, 1.25vw, 18px); /* 動態調整 */
}

body {
  margin: 0;
  line-height: normal;
  background: var(---2, linear-gradient(57deg, #313131 52.41%, #000 100%));
}

section.header {
  /* =========================
     手機版 MENU 按鈕樣式
     ========================= */
  /* =========================
       手機版選單容器樣式
       ========================= */
}
section.header .header {
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  left: 0px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  font-size: 1.11rem;
  color: #fff;
  font-family: "DM Sans";
}
section.header .frame-parent {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px 30px;
  z-index: 2;
}
@media (max-width: 768px) {
  section.header .frame-parent {
    justify-content: center;
  }
}
section.header .frame-parent .user-interviews-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-left: 4.44rem;
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.header .frame-parent .user-interviews-parent .user-interviews-icon {
  width: 80px;
  position: relative;
  height: 80px;
  overflow: hidden;
  flex-shrink: 0;
}
section.header .frame-parent .user-interviews-parent .light-anima-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
section.header .frame-parent .user-interviews-parent .light-anima-parent .light-anima {
  align-self: stretch;
  position: relative;
}
section.header .frame-parent .user-interviews-parent .light-anima-parent .studio {
  align-self: stretch;
  position: relative;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
}
section.header .frame-parent .top-header {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4%;
  text-align: center;
  font-size: 0.83rem;
}
@media (max-width: 768px) {
  section.header .frame-parent .top-header {
    display: none;
  }
}
section.header .frame-parent .top-header .frame-group {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4%;
}
section.header .frame-parent .top-header .frame-group .parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.header .frame-parent .top-header .frame-group .parent:hover {
  color: #01ed8d;
  transition: none; /* 滑鼠移上去時立即變化，無過渡效果 */
}
section.header .frame-parent .top-header .frame-group .parent .div {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
}
section.header .frame-parent .top-header .frame-group .parent .b {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
section.header .frame-parent .top-header .button {
  width: 10rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: "Plus Jakarta Sans";
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.header .frame-parent .top-header .button:hover {
  color: #01ed8d;
  border: 1px solid #01ed8d;
  transition: none; /* 滑鼠移上去時立即變化，無過渡效果 */
}
section.header .frame-parent .top-header .button .lets-talk {
  position: relative;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
@keyframes white-to-transparent {
  0% {
    background-color: rgb(255, 255, 255); /* 白色 */
  }
  50% {
    background-color: rgba(255, 255, 255, 0); /* 完全透明 */
  }
  100% {
    background-color: rgb(255, 255, 255); /* 回到白色 */
  }
}
section.header .header-child {
  animation: white-to-transparent 10s linear infinite; /* 3 秒一個循環，線性無限變化 */
}
section.header .header-child {
  align-self: stretch;
  position: relative;
  background-color: #ffffff;
  height: 1px;
  opacity: 1;
  z-index: 1;
}
section.header .header-item {
  width: 1px;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  left: 80px;
  height: 900px;
  z-index: 2;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0)); /* 從上到下漸變透明 */
  opacity: 0.5; /* 整體透明度，也可以根據需要調整 */
}
section.header .mobile-menu-toggle {
  /* 新增：桌機版隱藏，手機版顯示 */
  display: none;
  cursor: pointer;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0);
  height: 100%;
  width: 80px;
  /* 手機版（768px 以下）才顯示 */
}
section.header .mobile-menu-toggle h1 {
  color: #fff;
  font-size: 1.11rem;
  font-weight: bold;
}
@media (max-width: 768px) {
  section.header .mobile-menu-toggle {
    display: flex;
    position: absolute;
    z-index: 998; /* 確保能蓋住 header */
    justify-content: center;
    align-items: center;
  }
  section.header .mobile-menu-toggle:hover h1 {
    color: #01ed8d;
  }
}
section.header .mobile-menu {
  /* 預設先不顯示 */
  display: none;
  position: absolute;
  top: 60px;
  left: 0.5rem;
  background-color: rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.89);
  border-radius: 8px;
  padding: 0 4rem 0rem 4rem;
  z-index: 999; /* 在按鈕下層一點點 */
  /* 讓文字與連結在手機版易於點擊 */
  /* 當視窗>=769px(桌機)時就隱藏這個容器 */
  /* 顯示狀態：加上 .show 時才真的 display: block; */
}
section.header .mobile-menu ul {
  z-index: 999;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
section.header .mobile-menu ul li {
  margin: 1rem 0;
}
section.header .mobile-menu ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.11rem;
}
section.header .mobile-menu ul li a:hover {
  color: #01ed8d;
}
section.header .mobile-menu .overlay {
  z-index: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
@media (min-width: 769px) {
  section.header .mobile-menu {
    display: none !important;
  }
}
section.header .mobile-menu.show {
  display: block;
}

section.hero_area .hero-area {
  width: 100%;
  position: relative;
  height: 929px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 80px 0px 0px;
  box-sizing: border-box;
  text-align: left;
  font-size: 1rem;
  color: #fff;
  font-family: "DM Sans";
}
section.hero_area .bg-1-icon {
  width: 44.5%;
  position: absolute;
  margin: 0 !important;
  top: 0px;
  left: 0px;
  height: 669px;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.25;
  z-index: 0;
}
section.hero_area .header-content {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10%;
  z-index: 1;
}
section.hero_area .header-content .headercontent {
  flex: 1;
  height: 789px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;
}
@media (max-width: 768px) {
  section.hero_area .header-content .headercontent {
    height: auto;
    align-self: self-start;
    margin-top: 5rem;
  }
}
section.hero_area .header-content .headercontent .d-innovation-infinite {
  align-self: stretch;
  position: relative;
  text-transform: uppercase;
}
section.hero_area .header-content .headercontent .div {
  align-self: stretch;
  position: relative;
  font-size: 4.44rem;
  letter-spacing: 0.2em;
  line-height: 5rem;
  text-transform: uppercase;
  font-weight: 600;
  font-family: Epilogue;
}
@media (max-width: 768px) {
  section.hero_area .header-content .headercontent .div {
    font-size: 3rem;
  }
}
section.hero_area .header-content .headercontent .div .p {
  margin: 0;
}
section.hero_area .header-content .headercontent .d {
  align-self: stretch;
  position: relative;
  font-size: 1rem;
  line-height: 1.77rem;
  font-family: Sora;
}
section.hero_area .header-content .headercontent .view-more-parent {
  width: 16.66rem;
  position: relative;
  height: 6.388rem;
  text-align: center;
  font-family: "Plus Jakarta Sans";
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.hero_area .header-content .headercontent .view-more-parent:hover {
  color: #01ed8d;
  transition: none; /* 滑鼠移上去時立即變化，無過渡效果 */
}
section.hero_area .header-content .headercontent .view-more-parent:hover .vector-icon {
  transition: none;
  filter: invert(58%) sepia(83%) saturate(325%) hue-rotate(90deg) brightness(102%) contrast(97%);
  transform: scale(1.1); /* 放大 1.1 倍 */
}
section.hero_area .header-content .headercontent .view-more-parent .view-more {
  position: absolute;
  top: 2.27rem;
  left: 8.44rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
section.hero_area .header-content .headercontent .view-more-parent .group-child {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  background-color: rgba(116, 116, 116, 0.3);
  width: 6.388rem;
  height: 6.388rem;
}
section.hero_area .header-content .headercontent .view-more-parent .vector-icon {
  position: absolute;
  height: 25.48%;
  width: 10.43%;
  top: 36.52%;
  right: 74.27%;
  bottom: 38%;
  left: 15.3%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
section.hero_area .header-content .header-content-inner {
  position: absolute;
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: -1;
  width: 100%;
  left: 0;
}
section.hero_area .header-content .header-content-inner .frame-child {
  align-self: stretch;
  position: relative;
  overflow: hidden;
  height: 789px;
  width: 100%;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 100%;
}

section.footer_area {
  width: 100%;
}
section.footer_area .footer-area {
  width: 100%;
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
  text-align: left;
  font-size: 1.77rem;
  color: #fff;
  font-family: DM Sans;
}
@media (max-width: 768px) {
  section.footer_area .footer-area {
    height: auto;
  }
}
section.footer_area .footer-area .footer-area-child {
  width: 100%;
  position: relative;
  background-color: #ffffff;
  height: 1px;
  opacity: 1;
}
section.footer_area .footer-area .footer {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px 10%;
  gap: 5rem;
}
@media (max-width: 768px) {
  section.footer_area .footer-area .footer {
    gap: 4rem;
  }
}
section.footer_area .footer-area .footer .bottom-navigation {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
section.footer_area .footer-area .footer .bottom-navigation .logo {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}
section.footer_area .footer-area .footer .bottom-navigation .logo .logo1 {
  width: auto;
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
}
section.footer_area .footer-area .footer .bottom-navigation .logo .logo1 .light-anima-studio {
  position: relative;
  top: 0px;
  left: 0px;
  font-weight: 600;
  text-align: center;
  align-self: center;
  width: auto;
  height: auto;
}
section.footer_area .footer-area .footer .bottom-navigation .logo .shaping-the-future-container {
  align-self: stretch;
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  height: auto;
  display: flex;
  align-items: start;
}
section.footer_area .footer-area .footer .bottom-navigation .logo .shaping-the-future-container .shaping-the-future {
  margin: 0;
}
section.footer_area .footer-area .footer .bottom-navigation .menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1rem;
}
section.footer_area .footer-area .footer .bottom-navigation .menu .menu1 {
  width: auto;
  position: relative;
  font-size: 1.38rem;
  display: inline-block;
  height: auto;
  margin-bottom: 1rem;
  letter-spacing: 0.3em;
  flex-shrink: 0;
}
section.footer_area .footer-area .footer .bottom-navigation .menu .d {
  width: auto;
  position: relative;
  line-height: 167.09%;
  display: inline-block;
  height: auto;
  flex-shrink: 0;
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.footer_area .footer-area .footer .bottom-navigation .menu .d:hover {
  color: #01ed8d;
  transition: none; /* 滑鼠移上去時立即變化，無過渡效果 */
}
section.footer_area .footer-area .footer .bottom-navigation .menu .div {
  width: auto;
  position: relative;
  letter-spacing: 0.45em;
  line-height: 167.09%;
  display: inline-block;
  height: auto;
  flex-shrink: 0;
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.footer_area .footer-area .footer .bottom-navigation .menu .div:hover {
  color: #01ed8d;
  transition: none; /* 滑鼠移上去時立即變化，無過渡效果 */
}
section.footer_area .footer-area .footer .bottom-navigation .menu .email-lightanimastudiogma-container {
  width: auto;
  position: relative;
  line-height: 167.09%;
  display: flex;
  flex-wrap: wrap;
  height: 25px;
}
section.footer_area .footer-area .footer .bottom-navigation .menu .email-lightanimastudiogma-container .email {
  font-weight: 500;
}
section.footer_area .footer-area .footer .bottom-navigation .menu .email-lightanimastudiogma-container .eaddress {
  width: auto;
}
@media (max-width: 768px) {
  section.footer_area .footer-area .footer .bottom-navigation {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  section.footer_area .footer-area .footer .bottom-navigation .logo .logo1 {
    justify-content: center;
  }
  section.footer_area .footer-area .footer .bottom-navigation .shaping-the-future-container {
    justify-content: center;
  }
  section.footer_area .footer-area .footer .bottom-navigation .menu {
    align-items: center;
  }
  section.footer_area .footer-area .footer .bottom-navigation .menu .menu1 {
    margin-top: 4rem;
    margin-bottom: 0.5rem;
  }
}
section.footer_area .footer-area .footer .copyright-parent {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
}
section.footer_area .footer-area .footer .copyright-parent .copyright {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
section.footer_area .footer-area .footer .copyright-parent .copyright .copyright-icon {
  width: 1rem;
  position: relative;
  height: 1rem;
}
section.footer_area .footer-area .footer .copyright-parent .copyright .all-rights-reserved {
  position: relative;
  font-weight: 500;
}
section.footer_area .footer-area .footer .copyright-parent .privacy {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  font-size: 1rem;
}
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing,
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing1,
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing2 {
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing:hover,
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing1:hover,
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing2:hover {
  color: #01ed8d;
  transition: none; /* 滑鼠移上去時立即變化，無過渡效果 */
}
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing {
  width: auto;
  position: relative;
  font-weight: 500;
  display: inline-block;
  height: auto;
  flex-shrink: 0;
}
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing1 {
  width: auto;
  position: relative;
  font-weight: 500;
  display: inline-block;
  height: auto;
  flex-shrink: 0;
}
section.footer_area .footer-area .footer .copyright-parent .privacy .pricing2 {
  width: auto;
  position: relative;
  font-weight: 500;
  display: inline-block;
  height: auto;
  flex-shrink: 0;
}
section.footer_area .footer-area .footer .copyright-parent .social {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
section.footer_area .footer-area .footer .copyright-parent .social .social_icon {
  text-decoration: none; /* 移除底線 */
  color: inherit; /* 繼承父層顏色，這樣可以保持原來的顏色 */
}
section.footer_area .footer-area .footer .copyright-parent .social .social_icon:hover {
  transition: none; /* 滑鼠移上去時立即變化，無過渡效果 */
  transform: scale(1.1);
}
section.footer_area .footer-area .footer .copyright-parent .social .social_icon:hover img {
  filter: invert(44%) sepia(51%) saturate(1454%) hue-rotate(88deg) brightness(99%) contrast(99%);
}
section.footer_area .footer-area .footer .copyright-parent .social .linkedin-icon {
  width: 2.75rem;
  position: relative;
  height: 2.75rem;
}
@media (max-width: 768px) {
  section.footer_area .footer-area .footer .copyright-parent {
    flex-direction: column;
    gap: 1rem;
  }
}

/* LINE聯繫按鈕樣式 */
.line-contact-button {
  position: fixed;
  bottom: 3rem;
  right: 0rem;
  width: 5rem;
  height: 5rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(100%);
}
.line-contact-button.show {
  opacity: 0.8;
  transform: translateX(0);
}
.line-contact-button:hover {
  opacity: 1;
  transform: scale(1.1);
}
.line-contact-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.line-contact-button img {
  width: 80%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 768px) {
  .line-contact-button {
    bottom: 2.5rem;
    left: auto;
    right: 0;
    width: 8rem;
    height: 8rem;
  }
  .line-contact-button a {
    justify-content: end;
  }
  .line-contact-button.show {
    opacity: 0.5;
    transform: translateX(0);
  }
  .line-contact-button:hover {
    opacity: 1;
    transform: scale(1.1);
  }
  .line-contact-button img {
    width: 60%;
    padding: 0.5rem;
  }
}/*# sourceMappingURL=public.css.map */