.stage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.stage .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1700px) {
  .container {
    max-width: 1650px;
  }
}

.bannerArea {
  background: linear-gradient(to bottom, #6b5af6 0, #725ff6 40%, #967ef8 60%, #edc6ff 78%, #28d7bb 95%);
  overflow: hidden;
}
.bannerArea .slogan {
  position: absolute;
  opacity: 0;
}
.bannerArea .bannerBox {
  min-height: 100vh;
  align-items: center;
  text-align: center;
}
@media (max-width: 991px) {
  .bannerArea .bannerBox {
    min-height: 0;
    padding: 60% 0 74% 0;
  }
}
@media (max-width: 767px) {
  .bannerArea .bannerBox {
    padding: 64% 0 70% 0;
  }
}
.bannerArea .Txt img {
  width: 450px;
  display: block;
  margin: 0 auto 5% auto;
}
@media (max-width: 1500px) {
  .bannerArea .Txt img {
    width: 400px;
  }
}
@media (max-width: 767px) {
  .bannerArea .Txt img {
    width: 282px;
    margin-bottom: 10%;
  }
}
.bannerArea .Txt h2 {
  color: #040463;
  font-size: 2.2rem;
}
@media (max-width: 1600px) {
  .bannerArea .Txt h2 {
    font-size: 2rem;
  }
}
@media (max-width: 767px) {
  .bannerArea .Txt h2 {
    font-size: 1.4rem;
  }
}

.Txt {
  font-family: "Noto Serif TC", serif;
  color: #fff;
}
@media (max-width: 991px) {
  .Txt h2 {
    font-size: 1.4rem;
  }
}
.Txt p {
  width: 470px;
  text-align: justify;
  -moz-text-align-last: center;
       text-align-last: center;
  margin: 0 auto;
  letter-spacing: 1px;
  line-height: 2;
  margin-bottom: 0;
}
@media (max-width: 1025px) {
  .Txt p {
    width: 70%;
    letter-spacing: 0.5px;
  }
}
@media (max-width: 767px) {
  .Txt p {
    width: 95%;
  }
}

.page {
  overflow: hidden;
}
.page .Txt {
  text-align: center;
  z-index: 2;
}
.page .Txt h2 {
  letter-spacing: 1px;
  font-size: 2.2rem;
}
@media (max-width: 1600px) {
  .page .Txt h2 {
    font-size: 2rem;
  }
}
@media (max-width: 991px) {
  .page .Txt h2 {
    font-size: 1.7rem;
  }
}

.decoBorder {
  width: 220px;
  height: 3px;
  background: linear-gradient(to right, #4b00f6 0, #943aff 30%, #edc6ff 75%, #28d7bb 90%);
  display: block;
  overflow: hidden;
  margin: 1.7rem auto;
}
@media (max-width: 767px) {
  .decoBorder {
    width: 150px;
    height: 2px;
    margin: 1.5rem auto;
  }
}
.decoBorder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, #f1f2f3 50%, transparent 100%);
  animation: line-move 2s infinite;
}

@keyframes line-move {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.page01 .Txt {
  padding: 5% 0 1px 0;
  background: linear-gradient(to bottom, #28d7bb, #157fe1 100%);
}
@media (max-width: 767px) {
  .page01 .Txt {
    padding: 10% 0 1px 0;
  }
}

@media (max-width: 991px) {
  .page02, .page04 {
    background: #2ad6bb;
    padding-top: 5%;
  }
}
@media (max-width: 767px) {
  .page02, .page04 {
    padding-top: 0;
  }
}
.page02 .Txt, .page04 .Txt {
  padding-top: 6%;
}
@media (max-width: 767px) {
  .page02 .Txt, .page04 .Txt {
    padding-top: 20%;
  }
}

.page03 .Txt {
  padding-top: 5%;
}
@media (max-width: 767px) {
  .page03 .Txt {
    padding-top: 20%;
  }
}

.page04 {
  margin-top: -5px;
}

.page05, .page06 {
  overflow: hidden;
}
@media (max-width: 767px) {
  .page05 .Txt, .page06 .Txt {
    padding: 13% 0;
  }
}
.page05 .Txt h2, .page06 .Txt h2 {
  color: #612bd8;
}
.page05 .Txt p, .page06 .Txt p {
  color: #606060;
}

.page06 {
  margin-top: -4px;
}
.page06 .decoTxt {
  color: #fff;
  text-align: center;
  font-family: "Noto Serif TC", serif;
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  letter-spacing: 2px;
}
.page06 .decoTxt b {
  display: block;
  font-weight: 400;
  font-size: 2.5rem;
}
@media (max-width: 767px) {
  .page06 .decoTxt b {
    font-size: 1.7rem;
  }
}

.videoBox {
  overflow: hidden;
  margin-top: -5px;
}
.videoBox a {
  display: block;
}
.videoBox a .Img .innerImg {
  padding-top: 50%;
}
.videoBox a i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 5rem;
  transition: all 0.5s;
}
.videoBox a:hover i {
  font-size: 6rem;
  transition: all 0.5s;
}

.imgSlick img,
.imgSlick .image {
  transform: scale(1.1);
  transition: transform 10s ease;
}

.imgSlick .slick-slide.slick-active img,
.imgSlick .slick-slide.slick-active .image {
  transform: scale(1);
}

.imgSlick .zoom-animate {
  animation: zoomOut 10s ease forwards;
}

@keyframes zoomOut {
  from {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
[data-aos=custom-zoom-out] {
  transform: scale(1.1);
  opacity: 1;
  transition-property: transform, opacity;
  transition: transform 3s ease, opacity 3s ease !important;
}

[data-aos=custom-zoom-out].aos-animate {
  transform: scale(1);
  opacity: 1;
}

.fancybox-button {
  height: 60px;
  width: 60px;
}/*# sourceMappingURL=style.css.map */