@charset "UTF-8";
.title {
  width: 100%;
  position: relative;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  font-size: 2.77rem;
  margin-top: 150px;
  color: #fff;
  font-family: Manrope;
}
.title .div {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.2em;
  text-transform: capitalize;
  font-weight: 800;
}
.title .home {
  position: relative;
  text-transform: capitalize;
  font-weight: 800;
}
.title .icon {
  width: 12px;
  position: relative;
  height: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.title .breadcrumb {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.5;
  font-size: 14px;
}

.bg-icon {
  width: 100%;
  position: absolute;
  margin: 0 !important;
  top: 200px;
  left: -75px;
  max-width: 100%;
  overflow: hidden;
  height: 929px;
  flex-shrink: 0;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
}

.info {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-size: 20px;
  margin-top: 150px;
  color: #fff;
  font-family: Manrope;
}
.info .p {
  margin: 0;
}
.info .office-address {
  align-self: stretch;
  position: relative;
  font-weight: 800;
}
.info .f-2-no-382-container {
  align-self: stretch;
  position: relative;
  font-size: 12px;
  line-height: 160%;
  font-family: "Azeret Mono";
  color: rgba(255, 255, 255, 0.53);
}
.info .content1 {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.info .div {
  width: 22.22rem;
  min-width: 298px;
  border-radius: 30px;
  border: 1px solid #fff;
  box-sizing: border-box;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.info .div:hover {
  border: 1px solid #01ed8d;
}
.info .email {
  align-self: stretch;
  position: relative;
  font-size: 20px;
  font-weight: 800;
  font-family: Manrope;
}
.info .lightanimastudiogmailcom {
  align-self: stretch;
  position: relative;
  line-height: 160%;
  color: rgba(255, 255, 255, 0.53);
  overflow-wrap: break-word; /* 現代瀏覽器的推薦用法 */
}
.info .div1 {
  width: 22.22rem;
  min-width: 298px;
  border-radius: 30px;
  border: 1px solid #fff;
  box-sizing: border-box;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  font-size: 14px;
  font-family: "Azeret Mono";
}
.info .div1:hover {
  border: 1px solid #01ed8d;
}
.info .div3 {
  align-self: stretch;
  position: relative;
  font-size: 14px;
  line-height: 160%;
  font-family: "Azeret Mono";
  color: rgba(255, 255, 255, 0.53);
}
.info .content {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 30px;
}

.contactform {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 45px;
  text-align: center;
  font-size: 40px;
  margin-top: 8.33rem;
  margin-bottom: 8.33rem;
  color: #fff;
  font-family: Manrope;
}
.contactform .title {
  align-self: center;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin: 0;
  height: auto;
}
.contactform .title .p {
  margin: 0;
  letter-spacing: 0.2em;
}
.contactform .title .contact-us1 {
  margin: 0;
}
.contactform .title .contact-us {
  align-self: stretch;
  position: relative;
  text-transform: capitalize;
  font-weight: 800;
}
.contactform .title .have-a-question {
  align-self: stretch;
  position: relative;
  font-size: 14px;
  line-height: 160%;
  font-family: "Azeret Mono";
  color: rgba(255, 255, 255, 0.53);
}
.contactform .main {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
  text-align: left;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.53);
  font-family: "Azeret Mono";
  width: 70rem;
  max-width: 90%;
  align-self: center;
}
.contactform .main .your-name {
  flex: 1;
  position: relative;
  line-height: 160%;
}
.contactform .main .list {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 30px;
}
.contactform .main .list .name {
  align-self: stretch;
  flex: 1 1 0;
  min-width: 300px;
  border-radius: 12px;
  background-color: #232323;
  height: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 26px;
  box-sizing: border-box;
  /* 新增以下樣式，用來覆蓋 Chrome/部分 WebKit 瀏覽器的 autofill 白色背景 */
}
.contactform .main .list .name input:-webkit-autofill,
.contactform .main .list .name input:-webkit-autofill:hover,
.contactform .main .list .name input:-webkit-autofill:focus,
.contactform .main .list .name input:-webkit-autofill:active {
  /* 使用你自己希望的背景色 */
  -webkit-box-shadow: 0 0 0 1000px #232323 inset !important;
  background-color: rgba(255, 0, 0, 0) !important;
  /* 根據你的字色需求，自行定義 */
  -webkit-text-fill-color: rgba(255, 255, 255, 0.53) !important;
  /* 其他細節，如移除預設的框線之類，也可以在這裡設定 */
  border: none;
}
.contactform .main .message {
  align-self: stretch;
  border-radius: 30px;
  background-color: #232323;
  height: 350px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 15px 26px;
  box-sizing: border-box;
}
.contactform .main .submit-btn {
  width: 200px;
  border-radius: 12px;
  background-color: #01ed8d;
  height: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  gap: 10px;
  color: #161616;
  font-family: Manrope;
  cursor: pointer;
}
.contactform .main .submit-btn:hover {
  opacity: 0.8;
}
.contactform .main .submit-btn .send-message {
  position: relative;
  text-transform: capitalize;
  font-weight: 800;
}
.contactform .main .submit-btn .icon {
  width: 18px;
  position: relative;
  height: 18px;
  overflow: hidden;
  flex-shrink: 0;
}/*# sourceMappingURL=style_contact.css.map */