@charset "UTF-8";
.stage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1137254902);
}
@media (max-width: 991px) {
  .stage {
    height: 99.5%;
  }
}
.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 {
  overflow: hidden;
}
.videoArea .videoBox {
  padding: 25% 0;
  align-items: center;
  z-index: 2;
}
@media (max-width: 991px) {
  .videoArea .videoBox {
    min-height: 0;
    padding: 69% 0;
  }
  .videoArea .videoBox img {
    width: 40%;
  }
}
.videoArea .videoBox {
  text-align: center;
  font-family: "Noto Serif TC", serif;
}
.videoArea .videoBox h2 {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.382);
  margin-bottom: 2rem;
  font-size: calc(1.2rem + 0.9vw);
  letter-spacing: 8px;
}
@media (max-width: 991px) {
  .videoArea .videoBox h2 {
    letter-spacing: 5px;
    margin-bottom: 6rem;
  }
}
.videoArea .videoBox h3 {
  font-size: calc(0.8rem + 0.7vw);
  letter-spacing: 6px;
  color: rgba(255, 255, 255, 0.9098039216);
}
@media (max-width: 991px) {
  .videoArea .videoBox h3 {
    font-size: calc(1rem + 0.6vw);
    letter-spacing: 3px;
    line-height: 1.8;
  }
}

.page .Txt {
  text-align: center;
  color: #833625;
}
.page .Txt h3 {
  font-size: clamp(14px, -1.5px + 1.56vw, 28.5px);
  font-family: "Noto Serif TC", serif;
  line-height: 1.8;
  font-weight: 600;
  letter-spacing: 6px;
}
@media (max-width: 991px) {
  .page .Txt h3 {
    font-size: clamp(14px, -0.97px + 1.51vw, 28px);
  }
}
.page .Txt > span {
  display: block;
  font-family: "Cinzel", serif;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 4px;
  font-size: clamp(10px, -0.69px + 1.08vw, 20px);
  margin-bottom: clamp(17px, -0.1px + 1.72vw, 33px);
}
@media (max-width: 991px) {
  .page .Txt > span {
    font-size: clamp(13px, 0.67px + 3.16vw, 32px);
    margin-bottom: clamp(23px, 0.94px + 5.66vw, 57px);
  }
}
.page .Txt h2 {
  font-size: clamp(19px, 0.83px + 1.83vw, 36px);
  font-family: "Noto Serif TC", serif;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 8px;
  margin-bottom: clamp(39px, -0.55px + 3.99vw, 76px);
}
@media (max-width: 991px) {
  .page .Txt h2 {
    font-size: clamp(23px, 0.29px + 5.82vw, 58px);
    margin-bottom: clamp(22px, 1.23px + 5.32vw, 54px);
  }
}
.page .Txt p {
  font-size: clamp(11px, 0.31px + 1.08vw, 21px);
  line-height: 2;
  letter-spacing: 4px;
}
@media (max-width: 991px) {
  .page .Txt p {
    font-size: clamp(13px, -0.63px + 3.49vw, 34px);
    margin-bottom: clamp(38px, -0.29px + 9.82vw, 97px);
    letter-spacing: 2px;
  }
}

.page01,
.page02,
.page03,
.page04,
.page05 {
  padding-block: clamp(114px, 0.69px + 11.42vw, 220px);
  padding-left: clamp(82px, -1.38px + 8.41vw, 160px);
}
@media (max-width: 991px) {
  .page01,
  .page02,
  .page03,
  .page04,
  .page05 {
    padding-block: clamp(39px, -0.58px + 10.15vw, 100px);
    padding-inline: 0;
  }
}
@media (min-width: 992px) {
  .page01 .Txt,
  .page02 .Txt,
  .page03 .Txt,
  .page04 .Txt,
  .page05 .Txt {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.page01 .innerImg,
.page02 .innerImg,
.page03 .innerImg,
.page04 .innerImg,
.page05 .innerImg {
  padding-top: 67%;
}

.page06 .pcVer {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
}
@media (min-width: 992px) {
  .page06 .pcVer {
    background-image: url(../images/img/page06-bg-pc-1.jpg);
    aspect-ratio: 16/9;
  }
}
@media (max-width: 991px) {
  .page06 .pcVer {
    background-image: url(../images/img/page06-bg-m-1.jpg);
    min-height: 100vh;
  }
}
.page06 img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  width: 32%;
}
@media (max-width: 991px) {
  .page06 img {
    margin-inline: 0;
    width: 50%;
  }
}
.page06 .Txt {
  margin-bottom: 2%;
}
.page06 .Txt h2 {
  font-size: clamp(16px, -1.1px + 1.72vw, 32px);
  color: #fff;
  font-weight: normal;
  margin-bottom: 0;
  line-height: 2;
}
@media (max-width: 991px) {
  .page06 .Txt h2 {
    font-size: clamp(20px, -0.77px + 5.32vw, 52px);
    text-align: start;
    line-height: 1.5;
    margin-bottom: 2rem;
  }
}
@media (max-width: 991px) {
  .page06 .Txt {
    margin-bottom: 3rem;
  }
}

.page07 {
  background: #743a2a;
  padding: 8% 4%;
}
@media (max-width: 991px) {
  .page07 {
    margin-top: -5px;
    padding: 15% 5%;
  }
}
.page07 .Txt {
  font-weight: 400;
}
.page07 .Txt h2 {
  color: #d3bfa5;
  font-weight: normal;
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
  .page07 .Txt h2 {
    display: inline-block;
  }
}
.page07 .Txt > span {
  color: #d3bfa5;
}
.page07 .Txt p {
  color: #fff;
}
@media (max-width: 991px) {
  .page07 .Txt p {
    font-size: clamp(10px, -1.03px + 2.83vw, 27px);
  }
}
@media (max-width: 991px) {
  .page07 .Txt {
    text-align: start;
  }
}
.page07 .Txt b {
  font-weight: normal;
}
.page07 .Txt b::after {
  content: "";
  display: inline-block;
  width: 10%;
  height: 1px;
  background-color: #d3bfa5;
  vertical-align: middle;
}
@media (max-width: 991px) {
  .page07 .Txt b {
    display: flex;
    align-items: center;
  }
  .page07 .Txt b::after {
    flex: 1;
    width: auto;
    margin-inline: 10px;
  }
}
.page07 .subTxt {
  border-top: 1px solid #d3bfa5;
  border-bottom: 1px solid #d3bfa5;
}
@media (min-width: 992px) {
  .page07 .subTxt {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
@media (min-width: 992px) {
  .page07 .col-lg-4 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .page07 .col-lg-7 {
    align-self: stretch;
  }
}
.page07 .titleBox {
  display: flex;
  justify-content: space-between;
  padding-block: 5%;
}
.page07 .titleBox h3 {
  color: #d3bfa5;
  font-family: "Noto Serif TC", serif;
  font-size: clamp(12px, -0.83px + 1.29vw, 24px);
}
@media (max-width: 991px) {
  .page07 .titleBox h3 {
    font-size: clamp(15px, 0.07px + 3.83vw, 38px);
  }
}
.page07 .titleBox .area {
  color: #fff;
  text-align: end;
}
.page07 .titleBox .area b {
  font-family: "Cinzel", serif;
  font-weight: 400;
  font-size: clamp(17px, -0.1px + 1.72vw, 33px);
}
@media (max-width: 991px) {
  .page07 .titleBox .area b {
    font-size: clamp(14px, 1.02px + 3.33vw, 34px);
  }
}
.page07 .titleBox .area h4 {
  font-family: "Noto Serif TC", serif;
  font-size: clamp(12px, 1.31px + 1.08vw, 22px);
}
@media (max-width: 991px) {
  .page07 .titleBox .area h4 {
    font-size: clamp(12px, 0.32px + 3vw, 30px);
  }
}
.page07 .imgBox {
  display: flex;
  gap: 8px;
  height: 100%;
}
.page07 .imgBox a {
  flex: 1;
  display: block;
}
.page07 .imgBox .Img,
.page07 .imgBox .innerImg {
  height: 100%;
  padding-top: 0;
}
.page07 .slick-dots {
  display: none !important;
}
.page07 .workBox {
  color: #fff;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
}
.page07 .workBox li {
  list-style: none;
  padding-bottom: 1em;
  white-space: nowrap;
  padding-bottom: 2rem;
}
@media (max-width: 991px) {
  .page07 .workBox li {
    padding-bottom: 1rem;
  }
}

.page08 {
  background-color: #743a2a;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  .page08 {
    min-height: 100vh;
  }
}
.page08 .Txt {
  color: #d3bfa5;
}
.page08 .Txt h2 {
  font-weight: 400;
  margin-bottom: 1rem;
}
@media (max-width: 991px) {
  .page08 .Txt h2 {
    margin-bottom: 0.5rem;
  }
}
.page08 .Txt > span {
  font-size: clamp(10px, -0.69px + 1.08vw, 20px);
}
@media (max-width: 991px) {
  .page08 .Txt > span {
    font-size: clamp(12px, -0.98px + 3.33vw, 32px);
  }
}
.page08 .Txt p {
  color: #fff;
}
@media (max-width: 991px) {
  .page08 .Txt p {
    margin-top: 10%;
  }
}
.page08 .Txt {
  margin-bottom: 6rem;
}
.page08 img {
  display: block;
  max-width: 100%;
  width: 12%;
  margin-inline: auto;
}
@media (max-width: 991px) {
  .page08 img {
    width: 40%;
  }
}
@media (min-width: 992px) {
  .page08 {
    aspect-ratio: 16/9;
  }
}

.page09 .innerImg,
.page10 .innerImg {
  padding-top: 56%;
}

.page11 {
  padding-block: 7%;
}
@media (max-width: 991px) {
  .page11 {
    padding-block: 12%;
  }
}
.page11 .Txt h2 {
  margin-bottom: 1.5rem;
}
.page11 .Txt p {
  letter-spacing: normal;
}
@media (max-width: 991px) {
  .page11 .Txt p {
    margin-bottom: 0;
  }
}
.page11 .col-4 {
  padding-inline: 5%;
}
.page11 .slick-prev,
.page11 .slick-next {
  display: none !important;
}
.page11 .imgSlick {
  padding-bottom: 30px;
}
.page11 .imgSlick .slick-dots {
  left: 0;
  right: 0;
  width: auto;
  text-align: center;
}
.page11 .infoCard .innerImg {
  padding-top: 100%;
}
.page11 .infoCard .Img {
  margin-bottom: 2rem;
}
.page11 .infoCard .Txt {
  text-align: start;
}
.page11 .infoCard .Txt p {
  font-style: clamp(16px, 1.03px + 1.51vw, 30px);
}
@media (max-width: 991px) {
  .page11 .infoCard .Txt p {
    font-size: clamp(19px, 0.18px + 4.83vw, 48px);
  }
}
.page11 .infoCard .Txt span {
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: normal;
  font-size: clamp(10px, -0.69px + 1.08vw, 20px);
}
@media (max-width: 991px) {
  .page11 .infoCard .Txt span {
    font-size: clamp(13px, 0.67px + 3.16vw, 32px);
  }
}
.page11 button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit; /* 繼承父層的字體設定 */
  color: #fff; /* 繼承父層的顏色 */
  cursor: pointer;
  outline: inherit;
}

.page12 .pcVer {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) {
  .page12 .pcVer {
    background-image: url(../images/img/page12-bg-1.jpg);
    aspect-ratio: 16/9;
  }
}
@media (max-width: 991px) {
  .page12 .pcVer {
    background-image: url(../images/img/page12-bg-m-1.jpg);
    min-height: 100vh;
    background-position: 33% top;
    align-items: flex-start;
  }
}
.page12 img {
  margin-inline: auto;
  color: #d3bfa5;
  max-width: 100%;
  width: 20%;
}
@media (max-width: 991px) {
  .page12 img {
    margin-left: auto;
    margin-right: 0;
    color: #833625;
    width: 32%;
    padding-right: 20px;
  }
}
.page12 .Txt {
  margin-bottom: 2%;
}
.page12 .Txt h2 {
  font-size: clamp(16px, -1.1px + 1.72vw, 32px);
  color: #fff;
  font-weight: normal;
  margin-bottom: 0;
  line-height: 2;
}
@media (max-width: 991px) {
  .page12 .Txt h2 {
    font-size: clamp(20px, -0.77px + 5.32vw, 52px);
    text-align: end;
    line-height: 1.5;
    color: #833625;
    margin-bottom: 2rem;
  }
}
@media (max-width: 991px) {
  .page12 .Txt {
    margin-bottom: 6rem;
    padding-top: 20%;
  }
}

.dialog-content {
  width: 100%;
  min-height: 100dvh;
  padding: clamp(20px, 2.5vw, 48px);
  display: flex;
  align-items: center;
  font-size: clamp(12.7px, -0.14px + 3.29vw, 32.49px);
}
@media (min-width: 992px) {
  .dialog-content {
    font-size: clamp(10px, -0.69px + 1.08vw, 20px);
  }
}

.team-name {
  margin-top: 0.5em;
  font-size: clamp(20px, 1.83px + 4.66vw, 48px);
  color: #833625;
}
@media (min-width: 992px) {
  .team-name {
    font-size: clamp(15.5px, 1.56vw, 30px);
  }
}

.work-info li {
  color: #833625;
}

.works-container {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.work-item {
  min-width: 0;
}
.work-item img {
  width: 100%;
  height: clamp(230px, 23vw, 440px);
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.work-item .img-caption {
  color: #833625;
  text-align: center;
}

\ .workSlick .slick-slide {
  opacity: 0;
}

.workSlick .slick-slide.slick-current {
  opacity: 1;
}

#dialog-content-team1 .work-item:nth-child(1) {
  flex: 280 1 0;
}

#dialog-content-team1 .work-item:nth-child(2) {
  flex: 630 1 0;
}

#dialog-content-team1 .work-item:nth-child(3) {
  flex: 347 1 0;
}/*# sourceMappingURL=style.css.map */