.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;
}

.slogan {
  position: absolute;
  opacity: 0;
}

.videoArea .stage {
  background: rgba(0, 0, 0, 0.1450980392);
}
.videoArea .videoBox {
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.Txt {
  letter-spacing: 0.1rem;
}
.Txt h2 {
  font-family: "Noto Serif TC", serif;
  line-height: 1.5;
  color: #cf9d5b;
}
.Txt h4 {
  font-family: "Noto Serif TC", serif;
}
@media (max-width: 991px) {
  .Txt h5 {
    font-size: 1rem;
  }
}
.Txt p {
  line-height: 1.7;
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .Txt p {
    text-align: justify;
  }
}

.page {
  padding: 5% 0;
  overflow: hidden;
}
@media (max-width: 991px) {
  .page {
    padding: 10% 3%;
  }
}
.page .Txt h2 {
  margin-bottom: 13%;
}
@media (max-width: 991px) {
  .page .Txt h2 {
    margin-bottom: 23%;
  }
}

.page01 {
  background: linear-gradient(127deg, #278be8 0, #278be8 30%, #639be0 35%, #164bcf 60%, #164bcf 100%);
}
@media (max-width: 991px) {
  .page01 {
    margin-top: -5px;
    background: linear-gradient(139deg, #278be8 0, #278be8 50%, #639be0 55%, #164bcf 65%, #164bcf 100%);
  }
}
.page01 .container, .page01 img {
  z-index: 3;
}
.page01 .Txt {
  padding: 5%;
}
@media (max-width: 991px) {
  .page01 .Txt {
    padding: 10% 3% 10% 3%;
  }
}
.page01 .Txt h5 {
  margin-bottom: 2rem;
}
@media (max-width: 991px) {
  .page01 .Txt h5 {
    line-height: 2.4;
    margin-bottom: 1rem;
  }
}
.page01 .Txt span {
  padding-bottom: 10px;
  margin-bottom: 1rem;
}
.page01 .Txt span::after {
  content: "";
  width: 190px;
  height: 3px;
  background: #666666;
  position: absolute;
  bottom: 0;
  left: 0;
}

.page02 .Txt h2:after {
  content: "";
  background-image: url(../images/img/page02-txt.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 150%;
  position: absolute;
  right: 10%;
  bottom: -80%;
  z-index: -1;
}
@media (max-width: 991px) {
  .page02 .Txt h2:after {
    width: 65%;
    height: 147%;
    bottom: -90%;
    right: 5%;
  }
}
.page02 .imgSlick::after {
  content: "";
  background-image: url(../images/img/page02-deco-pic.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: -30%;
  top: 15%;
  z-index: -1;
}

@media (max-width: 991px) {
  .page03 {
    padding-bottom: 15%;
  }
}
.page03 .Txt h2:after {
  content: "";
  background-image: url(../images/img/page03-txt.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 35%;
  bottom: -50%;
  z-index: -1;
}
@media (max-width: 991px) {
  .page03 .Txt h2:after {
    width: 80%;
    height: 150%;
    bottom: -100%;
    right: 0;
  }
}
@media (max-width: 991px) {
  .page03 .imgSlick2 {
    margin-top: 25%;
  }
}
.page03 .imgSlick2::after {
  content: "";
  background-image: url(../images/img/page03-deco-pic.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 140%;
  height: 70%;
  position: absolute;
  right: -75%;
  top: 15%;
  z-index: -1;
}
@media (max-width: 991px) {
  .page03 .imgSlick2::after {
    background-position: right;
    width: 80%;
    height: 140%;
    right: -10%;
    top: -20%;
  }
}

.page04, .page06, .page14, .page15 {
  overflow: hidden;
  padding: 5% 0;
}
@media (max-width: 991px) {
  .page04, .page06, .page14, .page15 {
    padding: 10% 3%;
  }
}
.page04 .Txt h2, .page06 .Txt h2, .page14 .Txt h2, .page15 .Txt h2 {
  padding-bottom: 2rem;
  margin-bottom: 3rem;
}
@media (max-width: 991px) {
  .page04 .Txt h2, .page06 .Txt h2, .page14 .Txt h2, .page15 .Txt h2 {
    margin-bottom: 1.5rem;
  }
}
.page04 .Txt h2::after, .page06 .Txt h2::after, .page14 .Txt h2::after, .page15 .Txt h2::after {
  content: "";
  width: 130px;
  height: 5px;
  background: linear-gradient(to right, #176394 0, #3883b3 30%, #4a98c9 50%, #31adce 70%, #2cadca 90%);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .page04 .Txt h2::after, .page06 .Txt h2::after, .page14 .Txt h2::after, .page15 .Txt h2::after {
    height: 3px;
    width: 100px;
  }
}
.page04 .Txt p, .page06 .Txt p, .page14 .Txt p, .page15 .Txt p {
  margin-bottom: 7%;
}
@media (max-width: 991px) {
  .page04 .Txt p, .page06 .Txt p, .page14 .Txt p, .page15 .Txt p {
    margin-bottom: 15%;
  }
}
.page04 .Txt p:after, .page06 .Txt p:after, .page14 .Txt p:after, .page15 .Txt p:after {
  content: "";
  background-image: url(../images/img/page04-txt.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 28%;
  height: 400%;
  position: absolute;
  left: 5%;
  bottom: -330%;
}
@media (max-width: 991px) {
  .page04 .Txt p:after, .page06 .Txt p:after, .page14 .Txt p:after, .page15 .Txt p:after {
    background-size: contain;
    width: 80%;
    height: 80%;
    bottom: -60%;
    left: 0;
  }
}
.page04 .Img, .page06 .Img, .page14 .Img, .page15 .Img {
  padding: 0 3px;
}
@media (max-width: 991px) {
  .page04 .Img, .page06 .Img, .page14 .Img, .page15 .Img {
    padding: 0;
  }
}

@media (max-width: 991px) {
  .page05 {
    padding: 0 3% 7% 0;
  }
}
@media (max-width: 991px) {
  .page05 .Txt {
    margin-top: 20%;
    margin-bottom: 15%;
    padding-left: 3%;
  }
}
.page05 .Txt h2 {
  z-index: 3;
}
@media (max-width: 991px) {
  .page05 .Txt h2 {
    margin-bottom: 10%;
  }
}
.page05 .Txt h2:after {
  content: "";
  background-image: url(../images/img/page05-txt.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 13%;
  top: -60%;
  z-index: -1;
}
@media (max-width: 991px) {
  .page05 .Txt h2:after {
    top: -55%;
    right: 0;
  }
}
@media (max-width: 991px) {
  .page05 .imgBox {
    padding-left: 6%;
    padding-right: 3%;
  }
}

.page06 .Txt h2::after {
  background: linear-gradient(to right, #83ae5f 0, #8db977 30%, #8fbf84 50%, #73b97d 70%, #4faa65 90%);
}
.page06 .Txt p:after {
  background-image: url(../images/img/page06-txt.png);
  width: 45%;
  height: 200%;
  left: 5%;
  bottom: -220%;
}
@media (max-width: 991px) {
  .page06 .Txt p:after {
    background-size: contain;
    width: 100%;
    height: 100%;
    bottom: -95%;
    left: 0;
  }
}

.page07 {
  padding: 10% 0 32% 0;
}
@media (max-width: 991px) {
  .page07 {
    padding: 10% 3% 81% 3%;
  }
}

.page08, .page10 {
  padding: 5% 0;
}
@media (max-width: 991px) {
  .page08, .page10 {
    padding: 10% 3%;
  }
}
.page08 .Txt, .page10 .Txt {
  margin-bottom: 5%;
}
@media (max-width: 991px) {
  .page08 .Txt, .page10 .Txt {
    margin-bottom: 15%;
  }
}
.page08 .Txt p, .page10 .Txt p {
  text-align: center;
  color: #fff;
  margin-top: 1rem;
}
.page08 .Img, .page10 .Img {
  padding: 0 3px;
}

@media (max-width: 991px) {
  .page09 {
    background: linear-gradient(to bottom, #533626 0, #452e1c 50%, #2f1a10 70%, #1b0c07 90%);
  }
}
.page09 .Txt {
  padding: 73% 0 5% 0;
}
@media (max-width: 1920px) {
  .page09 .Txt {
    padding: 60% 0 5% 0;
  }
}
@media (max-width: 1499px) {
  .page09 .Txt {
    padding: 39% 0 5% 0;
  }
}
@media (max-width: 991px) {
  .page09 .Txt {
    padding: 10% 3%;
  }
}

.page10 {
  margin-top: -3px;
}
@media (max-width: 991px) {
  .page10 {
    padding-bottom: 0;
  }
}
.page10 .Img {
  padding: 0 10px;
}
.page10 .Img .innerImg {
  padding-top: 150%;
}

.page11 {
  padding: 5% 0;
}
@media (max-width: 991px) {
  .page11 {
    padding: 10% 0;
  }
}
.page11 .Txt {
  text-align: center;
}
@media (max-width: 991px) {
  .page11 .Txt p {
    text-align: center;
  }
}
.page11 .row {
  margin-top: 3%;
}
.page11 .row .Txt h2:after {
  content: "";
  width: 50px;
  height: 3px;
  background: #cf9d5b;
  position: absolute;
  top: -5%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .page11 .row .Txt span {
    letter-spacing: 0.5px;
  }
}
.page11 img {
  display: block;
  margin: 1rem auto;
}

.page12 {
  padding-top: 5%;
  overflow: hidden;
  background: linear-gradient(50deg, #2671e8 0, #4384e4 20%, #6199e1 30%, #328ee7 40%, #328ee8 50%, #548bdc 65%, #2e64d4 75%, #174bcf 80%);
}
@media (max-width: 991px) {
  .page12 {
    padding-top: 10%;
  }
}
.page12 .Txt .mainTitle {
  margin-bottom: 7%;
}
@media (max-width: 991px) {
  .page12 .Txt .mainTitle {
    margin-bottom: 0;
    padding-left: 2%;
  }
}
.page12 .Txt .mainTitle::after {
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  top: 50%;
  right: -37%;
}
@media (max-width: 991px) {
  .page12 .Txt .mainTitle::after {
    width: 0;
  }
}
.page12 .Txt .name {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}
.page12 .Txt .name::after {
  content: "";
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, #176ba2 0, #3686bb 20%, #61afe0 45%, #54afdb 60%, #23aeca 80%);
  position: absolute;
  bottom: 0;
  left: 0;
}
.page12 .Txt p {
  font-weight: 400;
}
@media (max-width: 991px) {
  .page12 .Txt p {
    font-size: 1.5rem;
  }
}
.page12 .titleBox {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}
.page12 .titleBox .title {
  color: #164bcf;
  writing-mode: vertical-lr;
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 1rem;
  margin-left: auto;
}
@media (max-width: 991px) {
  .page12 .titleBox .title {
    margin-right: 2%;
  }
}
.page12 .titleBox .title:after {
  content: "";
  width: 1px;
  height: 180px;
  background: #164bcf;
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .page12 .row {
    padding-top: 10%;
  }
}
.page12 .row .Txt {
  z-index: 3;
}
@media (max-width: 991px) {
  .page12 .row .Txt {
    padding: 10% 5%;
  }
}
.page12 .row:nth-child(3) {
  margin-top: 5%;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(3) {
    background: #fff;
    margin-top: 0;
  }
}
.page12 .row:nth-child(3) .col-lg-5::after {
  content: "";
  width: 100%;
  height: 600%;
  background: #f5f5f5;
  position: absolute;
  top: -160%;
  left: -12px;
  z-index: 1;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(3) .col-lg-5::after {
    width: 0;
  }
}
@media (max-width: 991px) {
  .page12 .row:nth-child(4) {
    background: linear-gradient(33deg, #278ce8 0, #338fe6 40%, #4292e4 60%, #5a99e2 75%);
  }
}
.page12 .row:nth-child(4) .titleBox .title {
  color: #fff;
  margin-left: 5%;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(4) .titleBox .title {
    margin-left: 2%;
  }
}
.page12 .row:nth-child(4) .titleBox .title:after {
  background: #fff;
}
.page12 .row:nth-child(4) .imgBox {
  margin-left: 5%;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(4) .imgBox {
    margin-left: auto;
  }
}
.page12 .row:nth-child(5) {
  margin-top: 5%;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(5) {
    background: #f5f5f5;
    margin-top: 0;
  }
}
.page12 .row:nth-child(5) .titleBox .title {
  margin-left: 5%;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(5) .titleBox .title {
    margin-left: 2%;
  }
}
.page12 .row:nth-child(5) .imgBox {
  margin-left: 5%;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(5) .imgBox {
    margin-left: auto;
    margin-top: 0;
  }
}
.page12 .row:nth-child(5) .col-lg-5::after {
  content: "";
  width: 100%;
  height: 600%;
  background: #fff;
  position: absolute;
  top: -160%;
  right: -12px;
  z-index: 1;
}
@media (max-width: 991px) {
  .page12 .row:nth-child(5) .col-lg-5::after {
    width: 0;
  }
}
.page12 .subTitle {
  color: #fff;
  padding: 5px 20px;
  margin-left: 5px;
  display: inline-block;
  letter-spacing: 0.1rem;
  background: linear-gradient(to left, #298ce8 0, #4895e3 20%, #5e96e0 30%, #568ddd 40%, #4177d9 50%, #2157d1 70%, #1b50d0 90%);
}
@media (max-width: 991px) {
  .page12 .subTitle {
    font-size: 0.9rem;
    margin-left: 0;
  }
}
.page12 img {
  z-index: 3;
}
.page12 .imgBox {
  margin-top: -7%;
  margin-bottom: 7%;
  z-index: 3;
}
@media (max-width: 991px) {
  .page12 .imgBox {
    margin-top: 0;
  }
}
.page12 .imgBox .imgSlick3 .Img, .page12 .imgBox .imgSlick5 .Img {
  padding: 0 5px;
}
@media (max-width: 991px) {
  .page12 .imgBox .imgSlick3 .Img, .page12 .imgBox .imgSlick5 .Img {
    padding: 0;
  }
}
.page12 .imgBox .imgSlick3 .Img .innerImg, .page12 .imgBox .imgSlick5 .Img .innerImg {
  padding-top: 140%;
}

.page13 {
  padding-top: 0;
  padding-left: 5%;
  padding-right: 5%;
}
@media (max-width: 991px) {
  .page13 {
    padding-top: 10%;
    padding-left: 3%;
    padding-right: 3%;
  }
}
@media (max-width: 991px) {
  .page13 .Txt h2 {
    margin-bottom: 30%;
  }
}
.page13 .Txt h2:after {
  content: "";
  background-image: url(../images/img/page13-txt-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 55%;
  height: 132%;
  position: absolute;
  right: 25%;
  bottom: -90%;
  z-index: -1;
}
@media (max-width: 991px) {
  .page13 .Txt h2:after {
    width: 97%;
    right: auto;
    left: 3%;
    bottom: -100%;
  }
}
.page13 .row .Txt:nth-child(2) h2:after {
  background-image: url(../images/img/page13-txt-2.png);
  width: 30%;
  height: 108%;
  right: 40%;
  bottom: -103%;
}
@media (max-width: 991px) {
  .page13 .row .Txt:nth-child(2) h2:after {
    width: 46%;
    left: auto;
    right: 23%;
  }
}
.page13 .row:nth-child(1) .infoImg {
  text-align: left;
}
@media (max-width: 991px) {
  .page13 .row:nth-child(1) .infoImg {
    top: 0;
  }
}
.page13 .row:nth-child(2) .Txt h2:after {
  background-image: url(../images/img/page13-txt-2.png);
  width: 30%;
  height: 108%;
  right: 40%;
  bottom: -103%;
}
@media (max-width: 991px) {
  .page13 .row:nth-child(2) .Txt h2:after {
    width: 46%;
    left: auto;
    right: 23%;
  }
}
.page13 .row:nth-child(2) .Img {
  margin-top: -15%;
}
@media (max-width: 991px) {
  .page13 .row:nth-child(2) .Img {
    margin-top: -10%;
  }
}

.page14 {
  padding: 0;
}
.page14 .Txt {
  text-align: center;
}
.page14 .Txt p {
  color: #fff;
}
.page14 .Txt p:after {
  width: 0;
}
.page14 .topBox {
  padding: 5% 0;
}
@media (max-width: 991px) {
  .page14 .topBox .Txt {
    padding: 10% 3%;
  }
}
.page14 .topBox .Txt h2::after {
  background: linear-gradient(to right, #62b3a3 0, #8fc9bd 30%, #94ccc1 50%, #bbdfd8 70%, #86beb3 85%);
}
.page14 .bottomBox {
  background: #8ab0a8;
}
@media (max-width: 991px) {
  .page14 .bottomBox {
    padding: 0 5%;
  }
}
.page14 .bottomBox .Txt {
  padding-bottom: 1.5rem;
}
@media (max-width: 991px) {
  .page14 .bottomBox .Txt {
    padding: 0 0 16% 0;
  }
}
.page14 .bottomBox .Txt .font-MT {
  margin-top: -1rem;
}
@media (max-width: 991px) {
  .page14 .bottomBox .Txt h4 {
    font-size: 1rem;
  }
}
@media (max-width: 991px) {
  .page14 .bottomBox .Txt p {
    text-align: center;
  }
}
@media (max-width: 991px) {
  .page14 .bottomBox .row {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1450980392);
  }
}
.page14 .bottomBox .col {
  background: #a9c9c4;
  border-right: 1px solid rgba(255, 255, 255, 0.7411764706);
}
.page14 .bottomBox .col:first-child img {
  margin-top: 10px;
}
@media (max-width: 991px) {
  .page14 .bottomBox .col:first-child h4 {
    margin-top: 16px;
  }
}
.page14 .bottomBox .col:nth-child(2n) {
  background: #8ab0a8;
}
@media (max-width: 991px) {
  .page14 .bottomBox .col:nth-child(2n) {
    border-right: 0px;
  }
}
@media (max-width: 991px) {
  .page14 .bottomBox .col:nth-child(3) {
    background: #8ab0a8;
  }
}
@media (max-width: 991px) {
  .page14 .bottomBox .col:nth-child(3) h4 {
    margin-top: 17px;
  }
}
@media (max-width: 991px) {
  .page14 .bottomBox .col:nth-child(4) {
    background: #a9c9c4;
  }
}
.page14 .bottomBox .col:nth-child(5) {
  border-right: 0px;
}

.page15 {
  padding-bottom: 0;
  background: linear-gradient(45deg, #117dc1 0, #1683c4 20%, #3e9ad3 40%, #69b2df 50%, #a3cbdc 65%, #bbd6d9 75%);
}
@media (max-width: 991px) {
  .page15 .Txt {
    padding: 0;
  }
}
.page15 .Txt h2::after {
  background: linear-gradient(to right, #176394 0, #3883b3 25%, #9dc4db 50%, #31adce 75%, #2cadca 90%);
}
.page15 .Txt p:after {
  width: 0;
}
@media (max-width: 991px) {
  .page15 .Img .innerImg {
    padding-top: 95%;
  }
}

.page16 .Txt h2:after {
  content: "";
  background-image: url(../images/img/page16-txt.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 150%;
  position: absolute;
  right: 10%;
  bottom: -80%;
  z-index: -1;
}
@media (max-width: 991px) {
  .page16 .Txt h2:after {
    width: 65%;
    height: 147%;
    bottom: -134%;
    right: 5%;
  }
}
@media (max-width: 991px) {
  .page16 p br {
    display: none;
  }
}
.page16 .Img .innerImg {
  padding-top: 77%;
}/*# sourceMappingURL=style.css.map */