@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;700&family=Noto+Sans+TC:wght@100;500;700&family=Ramabhadra&family=Rammetto+One&family=Roboto:wght@100;400;700&display=swap");
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
}

ol, ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

* {
  font-family: "Noto Sans TC", sans-serif;
  line-height: 1.6em;
}

h1 {
  font-size: 30px;
  color: #34A4A5;
  font-weight: bold;
}

img {
  width: 100%;
  max-width: 100%;
}

.bg {
  background-color: white;
  background: url(../images/index_bg.jpg) no-repeat top center;
  background-size: 100% 1000px;
}
@media screen and (max-width: 1080px) {
  .bg {
    background-size: 120% 800px;
  }
}
@media screen and (max-width: 800px) {
  .bg {
    background-size: 140% 700px;
  }
}
@media screen and (max-width: 600px) {
  .bg {
    background-size: 160% 80vh;
  }
}
@media screen and (max-width: 390px) {
  .bg {
    background-size: 180% 90vh;
    min-width: 320px;
  }
}

.bar {
  width: 100%;
  height: 40px;
  position: relative;
  background-color: #CE530F;
  box-sizing: border-box;
  padding: 10px;
}
@media screen and (max-width: 600px) {
  .bar {
    height: auto;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
.bar img {
  max-width: 430px;
  position: absolute;
  top: 6px;
  right: 15px;
}
@media screen and (max-width: 600px) {
  .bar img {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
    top: 0%;
    right: 0%;
  }
}

.container {
  width: 100%;
  max-width: 1300px;
  display: block;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .container {
    width: 96%;
  }
}
.container .mainBanner {
  display: block;
  position: relative;
  padding: 2rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  .container .mainBanner {
    padding: 1rem;
  }
}
.container .mainBanner .logo {
  width: 220px;
  position: absolute;
  top: 2rem;
  left: 0;
  cursor: pointer;
}
@media screen and (max-width: 1300px) {
  .container .mainBanner .logo {
    left: 2rem;
  }
}
@media screen and (max-width: 600px) {
  .container .mainBanner .logo {
    left: 1rem;
    top: 1rem;
    width: 150px;
  }
}
.container .mainBanner .banner {
  width: 100%;
  max-width: 1100px;
  margin: 3rem auto 0 auto;
}
.container .mainBanner .banner .title_1 {
  display: block;
  animation: bright 1s ease-in-out infinite reverse;
}
@media screen and (max-width: 600px) {
  .container .mainBanner .banner .title_1 {
    display: none;
  }
}
.container .mainBanner .banner .title_1_m {
  display: none;
}
@media screen and (max-width: 600px) {
  .container .mainBanner .banner .title_1_m {
    display: block;
    animation: bright 1s ease-in-out infinite reverse;
  }
}
.container .mainBanner .banner .title_2 {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 600px) {
  .container .mainBanner .banner .title_2 {
    margin: 2rem auto 0 auto;
    width: 80%;
    transform: scale(1.2);
  }
}

section.wrap {
  width: 90%;
  position: relative;
  display: flex;
  margin: 4rem auto;
}
@media screen and (max-width: 1080px) {
  section.wrap {
    margin: 3rem auto;
  }
}
section.wrap .icon, section.wrap .txt, section.wrap .formPic {
  margin: 0 1%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
section.wrap .txt {
  text-align: justify;
}

@media screen and (max-width: 1080px) {
  .one {
    flex-wrap: wrap;
  }
}
.one .icon {
  width: 15%;
  min-width: 145px;
  animation: rotate1 2s ease-in-out infinite reverse;
  transition: all 0.2s;
}
.one .txt {
  width: 30%;
  align-content: center;
  justify-content: start;
}
@media screen and (max-width: 1080px) {
  .one .txt {
    width: 100%;
    margin: 1rem auto 2rem auto !important;
  }
}
.one .formPic {
  width: 50%;
  margin: 0 !important;
}
@media screen and (max-width: 1080px) {
  .one .formPic {
    width: 80%;
    margin: 0 auto !important;
  }
}
@media screen and (max-width: 800px) {
  .one .formPic {
    width: 90%;
  }
}
@media screen and (max-width: 600px) {
  .one .formPic {
    width: 100%;
    overflow: auto;
  }
}
.one .formPic img {
  width: 100%;
  min-width: 100%;
}
@media screen and (max-width: 600px) {
  .one .formPic img {
    overflow: auto;
    min-width: 600px;
    padding: 0 0 1rem 0;
  }
}

@media screen and (max-width: 1080px) {
  .two {
    flex-wrap: wrap;
  }
}
.two .txt {
  width: 50%;
  margin: 0 !important;
  align-content: center;
  justify-content: start;
}
@media screen and (max-width: 1080px) {
  .two .txt {
    width: 100%;
    margin: 1rem auto 2rem auto !important;
  }
}
.two .icon {
  width: 50%;
  align-content: center;
  justify-content: center;
  animation: swing 2s ease-in-out infinite reverse;
}
.two .icon img {
  width: 100%;
  max-width: 440px;
}
@media screen and (max-width: 800px) {
  .two .icon img {
    max-width: 340px;
  }
}
@media screen and (max-width: 1080px) {
  .two .icon {
    width: 100%;
  }
}

.three {
  flex-wrap: wrap;
}
.three .txt {
  align-content: center;
  justify-content: start;
  margin: 1rem 0 !important;
}
.three .txt h1 {
  width: 100%;
}
.three .formPic {
  margin: 0 auto !important;
}
@media screen and (max-width: 600px) {
  .three .formPic {
    overflow: auto;
  }
}
.three .formPic img {
  width: 100%;
  min-width: 100%;
}
@media screen and (max-width: 600px) {
  .three .formPic img {
    min-width: 1000px;
    padding: 0 0 1rem 0;
  }
}

@media screen and (max-width: 1080px) {
  .four {
    flex-wrap: wrap;
  }
}
.four .icon {
  width: 15%;
  min-width: 145px;
  flex: wrap;
  align-content: start;
  justify-content: center;
  animation: swipeUP 2s ease-in-out infinite reverse;
}
.four .icon img {
  max-width: 145px;
  height: 216px;
}
.four .ab {
  position: absolute;
  animation: scale 2s ease-in-out infinite reverse;
}
@media screen and (max-width: 1080px) {
  .four .ab {
    position: relative;
  }
}
.four .txt {
  width: 35%;
  align-content: start;
  justify-content: start;
  position: relative;
  margin: 0 0 2rem 0;
}
@media screen and (max-width: 1080px) {
  .four .txt {
    width: 100%;
  }
}
.four .txt .icon {
  width: 100%;
  bottom: 0;
}
.four .txt .icon img {
  width: 310px;
  height: 304px;
  max-width: 310px;
}
@media screen and (max-width: 1200px) {
  .four .txt .icon img {
    width: 253px;
    height: 248px;
    max-width: 253px;
  }
}
@media screen and (max-width: 1080px) {
  .four .txt .icon img {
    width: 100%;
    margin: 2rem 0;
  }
}
.four .formPic {
  width: 50%;
  margin: 0 auto !important;
}
@media screen and (max-width: 1080px) {
  .four .formPic {
    width: 60%;
  }
}
@media screen and (max-width: 800px) {
  .four .formPic {
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .four .formPic {
    width: 100%;
    overflow: auto;
  }
}
.four .formPic img {
  width: 100%;
  min-width: 100%;
}
@media screen and (max-width: 600px) {
  .four .formPic img {
    overflow: auto;
    min-width: 600px;
    padding: 0 0 1rem 0;
  }
}

.five {
  flex-wrap: wrap;
}
.five .txt {
  align-content: center;
  justify-content: start;
  margin: 1rem 0 !important;
}
.five .txt h1 {
  width: 100%;
}
.five .formPic {
  width: 48%;
  margin: 0 1% 2rem 1% !important;
}
@media screen and (max-width: 800px) {
  .five .formPic {
    width: 80%;
    margin: 0 auto 2rem auto !important;
  }
}
@media screen and (max-width: 600px) {
  .five .formPic {
    width: 100%;
    overflow: auto;
  }
}
.five .formPic img {
  width: 100%;
  min-width: 100%;
}
@media screen and (max-width: 600px) {
  .five .formPic img {
    overflow: auto;
    min-width: 600px;
    padding: 0 0 1rem 0;
  }
}
.five .note {
  font-size: 14px;
  color: #787878;
  padding: 0 0 0 1%;
}

@media screen and (max-width: 1080px) {
  .six {
    flex-wrap: wrap;
  }
}
.six .txt {
  width: 70%;
  align-content: center;
  justify-content: start;
}
@media screen and (max-width: 1080px) {
  .six .txt {
    width: 100%;
    margin: 0 !important;
  }
}
.six .icon {
  width: 20%;
  min-width: 145px;
  align-content: center;
  justify-content: center;
  animation: rotate1 2s ease-in-out infinite reverse;
}
.six .icon img {
  width: 100%;
}

.seven {
  flex-wrap: wrap;
}
.seven .txt {
  align-content: center;
  justify-content: start;
  margin: 1rem 0 !important;
}
.seven .txt h1 {
  width: 100%;
}
.seven .formPic {
  margin: 0 auto !important;
}
@media screen and (max-width: 600px) {
  .seven .formPic {
    overflow: auto;
  }
}
.seven .formPic img {
  width: 100%;
  min-width: 100%;
}
@media screen and (max-width: 600px) {
  .seven .formPic img {
    overflow: auto;
    min-width: 1000px;
    padding: 0 0 1rem 0;
  }
}

@media screen and (max-width: 1080px) {
  .eight {
    flex-wrap: wrap;
  }
}
.eight .txt {
  width: 40%;
  align-content: center;
  justify-content: start;
}
@media screen and (max-width: 1080px) {
  .eight .txt {
    width: 100%;
    margin: 0 auto 2rem auto !important;
  }
}
.eight .icon {
  width: 10%;
  min-width: 150px;
  align-content: center;
  justify-content: center;
  animation: scale 2s ease-in-out infinite reverse;
}
.eight .icon img {
  width: 100%;
}
.eight .formPic {
  margin: 0 auto !important;
  width: 50%;
}
@media screen and (max-width: 1080px) {
  .eight .formPic {
    width: 60%;
  }
}
@media screen and (max-width: 800px) {
  .eight .formPic {
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .eight .formPic {
    width: 100%;
    overflow: auto;
  }
}
.eight .formPic img {
  width: 100%;
  min-width: 100%;
}
@media screen and (max-width: 600px) {
  .eight .formPic img {
    overflow: auto;
    min-width: 600px;
    padding: 0 0 1rem 0;
  }
}

@media screen and (max-width: 1080px) {
  .nine {
    flex-wrap: wrap;
  }
}
.nine .txt {
  align-content: center;
  justify-content: start;
  margin: 1rem 0 !important;
  position: relative;
  width: 50%;
}
@media screen and (max-width: 1080px) {
  .nine .txt {
    width: 100%;
  }
}
.nine .txt h1 {
  width: 100%;
}
.nine .icon {
  width: 50%;
  align-content: center;
  justify-content: center;
  animation: swing 2s ease-in-out infinite reverse;
}
@media screen and (max-width: 1080px) {
  .nine .icon {
    width: 48%;
  }
}
.nine .icon img {
  max-width: 350px;
}
.nine .ab {
  position: absolute;
  top: 50%;
  bottom: -180%;
  animation: swipeUP 2s ease-in-out infinite reverse;
}
@media screen and (max-width: 1200px) {
  .nine .ab {
    bottom: -160%;
  }
}
@media screen and (max-width: 1080px) {
  .nine .ab {
    position: relative;
    width: 48%;
  }
}
.nine .ab img {
  max-width: 250px;
}
@media screen and (max-width: 1200px) {
  .nine .ab img {
    max-width: 200px;
  }
}

@media screen and (max-width: 1080px) {
  .ten {
    flex-wrap: wrap;
  }
}
.ten .txt {
  width: 48%;
  align-content: end;
  justify-content: start;
  margin: 0 2% 0 0 !important;
}
@media screen and (max-width: 1080px) {
  .ten .txt {
    width: 100%;
    margin: 0 0 2rem 0 !important;
  }
}
.ten .formPic {
  margin: 0 auto !important;
  width: 50%;
}
@media screen and (max-width: 1080px) {
  .ten .formPic {
    width: 60%;
  }
}
@media screen and (max-width: 800px) {
  .ten .formPic {
    width: 80%;
  }
}
@media screen and (max-width: 600px) {
  .ten .formPic {
    width: 100%;
    overflow: auto;
  }
}
.ten .formPic img {
  width: 100%;
  min-width: 100%;
}
@media screen and (max-width: 600px) {
  .ten .formPic img {
    overflow: auto;
    min-width: 600px;
    padding: 0 0 1rem 0;
  }
}

footer {
  border-top: 5px solid #CE530F;
  padding: 2rem;
}
footer .container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}
footer .container .logo {
  width: 100%;
  text-align: center;
  cursor: pointer;
}
footer .container .logo img {
  width: 180px;
}
footer .container p {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 390px) {
  footer .container p {
    font-size: 12px;
  }
}

@keyframes rotate1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes swing {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes swipeUP {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bright {
  0% {
    -webkit-filter: brightness(1);
    transform: scale(1);
  }
  50% {
    -webkit-filter: brightness(1.2);
    transform: scale(1.05);
  }
  100% {
    -webkit-filter: brightness(1);
    transform: scale(1);
  }
}
@-webkit-keyframes rotate1 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes swing {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(20px);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes swipeUP {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes bright {
  0% {
    -webkit-filter: brightness(1);
    transform: scale(1);
  }
  50% {
    -webkit-filter: brightness(1.2);
    transform: scale(1.05);
  }
  100% {
    -webkit-filter: brightness(1);
    transform: scale(1);
  }
}

/*# sourceMappingURL=style.css.map */