@charset "UTF-8";
/* #2b2b2b */
/* #ffffff */
/* #dbd0c0 */
/* #faeee0 */
/* #f9e4c8 */
/* #f9cf93 */
/* #ffffff */
/* #2b2b2b */
:root {
  /* 主視覺輪播背景圖 */
  --background-first: url("../img/banner1.jpg");
  --background-second: url("../img/banner2.jpg");
  --background-third: url("../img/banner3.jpg");
  /* 內容區域背景圖 */
  --background-decoration-section: url("../img/spacejoy-OlFHzNjg9kY-unsplash.jpg");
  --background-aesthetics-section: url("../img/spacejoy-crjt6vBgYeg-unsplash.jpg");
}

/*.concave_svg_effect{
    width: 100%;
    aspect-ratio: 434 / 35;
}*/
/* 主視覺底色，自帶波浪底部，波浪樣式[\/\] */
.hero-section {
  position: relative;
  z-index: 1;
  padding: 160px 0 50px;
  background-color: rgb(219, 208, 192); /* 主視覺底色 */
  width: 100%;
  height: 100vh;
  box-sizing: cover;
  overflow: hidden;
}
.hero-section .banner_svg_effect {
  position: absolute;
  bottom: -1px;
  z-index: 2;
  fill: rgb(219, 208, 192); /* 主視覺底部向量弧形填色 */
}
.hero-section .carousel {
  position: absolute;
  top: 0;
  width: inherit;
  height: inherit;
  overflow: hidden;
}
.hero-section .carousel .carousel-indicators {
  bottom: 8vh;
}
.hero-section .carousel .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  margin-left: 5px;
}
.hero-section .carousel .carousel-item {
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  background-size: cover;
  background-position: center center;
  background-color: #000;
}
.hero-section .carousel .carousel-item.carousel-item-first {
  background-image: var(--background-first);
}
.hero-section .carousel .carousel-item.carousel-item-second {
  background-image: var(--background-second);
}
.hero-section .carousel .carousel-item.carousel-item-third {
  background-image: var(--background-third);
}
.hero-section .carousel .carousel-item .carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.hero-section .carousel .carousel-item .carousel-caption h2 {
  font-size: calc(18px + 1.4vw);
}
.hero-section .carousel .carousel-item .carousel-caption h2:before {
  content: "";
  position: relative;
  display: none;
}
.hero-section .carousel .carousel-control-next, .hero-section .carousel .carousel-control-prev {
  z-index: 3;
}
.hero-section .carousel .carousel-control-next:focus, .hero-section .carousel .carousel-control-prev:focus {
  outline: 0;
}

.section-svg-concave {
  position: relative;
  background-color: transparent;
}

.about-section {
  background-color: rgb(219, 208, 192);
}
.about-section:before {
  content: "";
  display: block;
  background-image: url("../img/section-decoration-item.svg");
  background-size: cover;
  aspect-ratio: 800/760;
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  z-index: -1;
}
.about-section:after {
  content: "";
  display: block;
  width: 100%;
  background-color: rgb(219, 208, 192);
  aspect-ratio: 434/35;
  margin-top: 30px;
  margin-bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22rgb(255, 255, 255)%22%20viewBox%3D%220%200%20434%2035%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-opacity%3D%221%22%20d%3D%22M0%2C1.3V35h434V15.9C210.3%2C69.6%2C162.1-11.2%2C0%2C1.3z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E");
}

.work-section {
  background-color: rgb(255, 255, 255);
}
.work-section:before {
  content: "";
  display: block;
  background-image: url("../img/section-decoration-item.svg");
  background-size: cover;
  aspect-ratio: 800/760;
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  z-index: -1;
}
.work-section:after {
  content: "";
  display: block;
  width: 100%;
  background-color: rgb(255, 255, 255);
  aspect-ratio: 434/35;
  margin-top: 30px;
  margin-bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22rgb(219, 208, 192)%22%20viewBox%3D%220%200%20434%2035%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-opacity%3D%221%22%20d%3D%22M0%2C1.3V35h434V15.9C210.3%2C69.6%2C162.1-11.2%2C0%2C1.3z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E");
}

.decoration-section {
  background-color: rgb(219, 208, 192);
}

.video-section {
  background-image: "none";
  color: rgb(219, 208, 192);
}
.video-section:before, .video-section:after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 434/35;
}
.video-section:before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20434%2035%22%20fill%3D%22rgb(219, 208, 192)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-opacity%3D%221%22%20d%3D%22M0%2C0v1.3C10%2C0.5%2C19.5%2C0.1%2C28.7%2C0H0z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-opacity%3D%221%22%20d%3D%22M39.5%2C0C171.7%2C1.7%2C229.5%2C64.9%2C434%2C15.9V0H39.5z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E");
  margin-bottom: 30px;
}
.video-section:after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20434%2035%22%20fill%3D%22rgb(249, 216, 170)%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-opacity%3D%221%22%20d%3D%22M0%2C1.3V35h434V15.9C210.3%2C69.6%2C162.1-11.2%2C0%2C1.3z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E");
  margin-top: 30px;
}

.video-section:before {
  position: absolute;
  z-index: 9;
  width: 100%;
  margin-top: -1px;
}
.video-section:after {
  position: absolute;
  bottom: 0;
  z-index: 9;
  margin-bottom: -1px;
}

.led-section {
  background-color: #f9d8aa;
}
.led-section:before {
  content: "";
  display: block;
  background-image: url("../img/section-decoration-item.svg");
  background-size: cover;
  aspect-ratio: 800/760;
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  z-index: -1;
}
.led-section:after {
  content: "";
  display: block;
  width: 100%;
  background-color: #f9d8aa;
  aspect-ratio: 434/35;
  margin-top: 30px;
  margin-bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22rgb(255, 255, 255)%22%20viewBox%3D%220%200%20434%2035%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-opacity%3D%221%22%20d%3D%22M0%2C1.3V35h434V15.9C210.3%2C69.6%2C162.1-11.2%2C0%2C1.3z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E");
}

.service-section {
  background-color: rgb(255, 255, 255);
}
.service-section:before {
  content: "";
  display: block;
  background-image: url("../img/section-decoration-item.svg");
  background-size: cover;
  aspect-ratio: 800/760;
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  z-index: -1;
}
.service-section:after {
  content: "";
  display: block;
  width: 100%;
  background-color: rgb(255, 255, 255);
  aspect-ratio: 434/35;
  margin-top: 30px;
  margin-bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22rgb(219, 208, 192)%22%20viewBox%3D%220%200%20434%2035%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20fill-opacity%3D%221%22%20d%3D%22M0%2C1.3V35h434V15.9C210.3%2C69.6%2C162.1-11.2%2C0%2C1.3z%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%3C%2Fsvg%3E");
}

@media screen and (max-width: 768px) {
  #workContent .carousel-indicators {
    flex-wrap: wrap;
    position: relative;
  }
}
.videoBox {
  width: 100%;
  aspect-ratio: 10/3.68;
  overflow: hidden;
  position: relative;
}

.videoembedded {
  width: 100%;
  height: 100%;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}

#ytvideo {
  width: 100%;
  aspect-ratio: 16/9;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}/*# sourceMappingURL=style-mainpage.css.map */