@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Righteous&display=swap');
/* 
輸入 Google Web Font 後註解調整如下
font-family: "Righteous",    sans-serif;               英文字體
font-family: "Noto Sans TC", sans-serif;               中文字體
font-family: "Righteous", "Noto Sans TC", sans-serif;  英中文字體
*/

/* 設定變數：常常需要的CSS屬性值, 需要統一的資訊(色彩值、字體值、數據值) */
:root {
  /* 變數名稱: 變數值; */
  --f-family-1: "Righteous", "Noto Sans TC", sans-serif;

  --c-nav-10: rgba(50, 5, 60, 1.0);
  --c-nav-05: rgba(50, 5, 60, 0.5);
  --c-nav-03: rgba(50, 5, 60, 0.3);
  --c-nav-00: rgba(50, 5, 60, 0.0);

  --c-assist1-10: rgba(120, 5, 160, 1.0);
  --c-assist1-05: rgba(120, 5, 160, 0.5);

  --c-assist2-10: rgba(130, 50, 150, 1.0);
  --c-assist2-05: rgba(130, 50, 150, 0.5);
  --c-assist2-03: rgba(130, 50, 150, 0.3);
  --c-assist2-01: rgba(130, 50, 150, 0.1);
  --c-assist2-00: rgba(130, 50, 150, 0.0);

  --c-point-word: red;
}

/* 整體預設 & 跨區共用 ============================================= */
/*
* { box-sizing: border-box; margin: 0; }
以上BS5框架已設定, BS5也針對各個標籤元素設定了margin, 所以上述不需要設定了
*/

html {
  font-size: 16px;
}

body {
  /* font-family: Arial, Helvetica, sans-serif; 一般的預設 */
  /* BS5已設定如下
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  background-image: url(./img/body_bg.png);
  color: #333;
}

section {
  /* 
  background-image: url(./img/shadow1.png);
  background-repeat: no-repeat;
  background-position: center top; 
  改由下述的合併縮寫方式, 合併寫法寫前面, 單一設定寫後面
  合併寫法不能包含CSS3.0新增的, 例如:background-size
  */
  background: url(./img/shadow1.png) no-repeat center top;
  background-size: 120% auto;
  padding-top: 140px;
  min-height: 300px;
}

section>h2 {
  background: url(./img/h1bg.png) no-repeat center;
  /* background-color: skyblue;  測試觀查用 */
  background-size: 100% auto;

  max-width: 600px;
  margin: 0 auto;
  /* block框的置中 */

  font-family: var(--f-family-1);
  /* font-weight: 600; */
  text-align: center;
  /* 內容文字置中 */
  letter-spacing: .1rem;
  margin-bottom: 40px;
}

.cur-point {
  cursor: pointer;
}

@media(min-width: 768px) {
  section {
    background-size: auto;
    /* 寬高皆auto表示依原圖尺寸 */
  }
}


/* header area ================================== */
.navbar {
  background-color: var(--c-nav-10);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1039;
}

.navbar-brand img {
  width: min(calc(30px + 4vw), 70px);
}

.navbar-brand h1 {
  font-size: min(calc(1rem + 1.5vw), 36px);
  font-family: var(--f-family-1);
  font-weight: 400;
}

.navbar-toggler {
  padding: 8px;
}

.navbar-toggler:focus {
  box-shadow: 0 0 .25rem 2px;
}

/* 按鈕一般狀態 */
.navbar-dark .navbar-nav .nav-link {
  color: #c3c3c3;
  font-family: var(--f-family-1);
  font-size: 17px;
  letter-spacing: 1px;
  transform-origin: center bottom;
  position: relative;
  transition: .2s;
}

/* 按鈕滑入狀態 */
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #c3c3c3;
  transform: scale(1.1);
}

/* 按鈕啟用狀態 */
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show>.nav-link {
  color: #fff;
  font-weight: 500;
  transform: scale(1.1);
}

@media(min-width: 768px) {
  .navbar {
    background: #32053C;
    background: linear-gradient(180deg,
        var(--c-nav-10) 0%,
        var(--c-nav-05) 60%,
        var(--c-nav-00) 100%);
    transition: .5s;
    animation: none;

    position: absolute;
  }

  /* JS負責：當視窗捲動時, 判斷.navbar是否已捲出畫面 => .navbar再加上.fixed */
  /* 如果已捲出=>由CSS負責：.navbar由上方滑回 */

  @keyframes navbarAni {
    0% {
      transform: translateY(-200%);
    }

    50% {
      transform: translateY(-200%);
    }

    /* 100% { transform: translateY(0); } */
  }

  .navbar.fixed {
    animation-name: navbarAni;
    animation-duration: 1s;
    position: fixed;
  }


  .navbar:hover {
    background-color: var(--c-nav-10);
  }


  /* 底線的基本設計 */
  .navbar-dark .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 4px;
    background-color: #c3c3c3;
    transform-origin: left center;
    transform: scaleX(0);
    transition: .3s;
  }

  /* 底線在滑入時的動態效果 */
  .navbar-dark .navbar-nav .nav-link:focus::after,
  .navbar-dark .navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
  }

  /* 底線在按鈕啟用狀態時的設計 */
  .navbar-dark .navbar-nav .nav-link.active::after,
  .navbar-dark .navbar-nav .show>.nav-link::after {
    background-color: #fff;
    transform: scaleX(1);
  }
}


/* .offcanvas area ================================== */
.offcanvas {
  /* width: 400px; */
  max-width: 85%;
  background-image: url(./img/sec2_f2.png), url(./img/body_bg.png);
  background-repeat: no-repeat, repeat;
  background-position: right bottom, center top;
  background-size: min(50vw, 180px) auto, auto;
}


.offcanvas-header {
  font-family: var(--f-family-1);
}

.offcanvas-body {
  background: url(./img/shadow1.png) no-repeat center top;
  background-size: 100% auto;
}

.offcanvas-body .nav-link {
  font-family: var(--f-family-1);
}


/* #sec1 area ================================== */
#sec1 {
  padding: 0;
}

#sec1 picture img {
  display: block;
  /* % 是相對上一層, 上一層必須有肯定寬高 */
  /* width: 100%; */
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.carousel-caption {
  /* position: absolute; */
  /* text-align: center; */
  background: rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.6) 30%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.6) 70%,
      rgba(255, 255, 255, 0) 100%);
  color: #000;
  padding: 2rem 1rem 1rem;

  top: 120px;
  bottom: auto;
  left: 66%;
  right: 10%;
}


/* #sec2 area ================================== */
#sec2 {
  /* padding-top: 140px; 已設定 */
  padding-bottom: 200px;
  position: relative;
}

#sec2 img.sec2f1 {
  position: absolute;
  left: 0;
  top: 40px;
  width: min(calc(40px + 5vw), 160px);
  height: auto;
  transform: rotate(10deg);
}

#sec2::before {
  content: '';
  /* background-color: skyblue; */
  background-image: url(./img/sec2_f1.png);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  opacity: .7;

  position: absolute;
  left: 0;
  bottom: 0;

  width: min(calc(40px + 5vw), 120px);
  height: 250px;
}

#sec2::after {
  content: '';
  /* background-color: skyblue; */
  background-image: url(./img/sec2_f2.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: .4;

  position: absolute;
  right: 0;
  bottom: -60px;

  width: 50%;
  height: 450px;
}

#sec2 h3 {
  font-family: var(--f-family-1);
}

#sec2 p {
  letter-spacing: .1rem;
  margin-bottom: 1.5rem;
  text-align: justify;
}

#sec2 .row {
  z-index: 1;
  position: relative;
}

#sec2 .col-txt {
  position: relative;
}

#sec2 .col-txt::before {
  content: '';
  background-color: var(--c-assist2-01);
  width: 100%;
  height: 100%;

  position: absolute;
  right: 0;
  top: 0;

  transform: translateY(40px);
}

#sec2 .col-img,
#sec2 .col-txt h3,
#sec2 .col-txt p {
  z-index: 1;
  position: relative;
}

/* 這個斷點負責.row的寬度 */
@media(min-width: 576px) {
  #sec2 .row {
    width: 90%;
    margin: 0 auto;
  }
}

/* 這個斷點負責.row的寬度 */
@media(min-width: 768px) {
  #sec2 .row {
    width: 80%;
    align-items: flex-start;
  }
}

/* 這個斷點負責.col左右排版 */
@media(min-width: 992px) {
  #sec2 .col-txt::before {
    padding-left: 200px;
    box-sizing: content-box;
    border-radius: 5px;
    transform: translateY(20px);
    /* z-index: -1; */
  }
}


/* #sec3 area ================================== */
#sec3 .tab-content {
  min-height: 300px;
  background: var(--c-assist2-01);
  background: linear-gradient(180deg,
      var(--c-assist2-01) 0%,
      var(--c-assist2-00) 50%);
}

.nav-tabs {
  border-bottom: 2px solid var(--c-assist2-03);
}

/* 按鈕一般狀態 */
.nav-tabs .nav-link {
  margin-bottom: -2px;
  border: 2px solid transparent;
  font-family: var(--f-family-1);
  font-weight: 600;
  color: #888;
  padding: .5rem min(calc(3px + 2.5vw), 1.5rem);
}

/* 按鈕滑入狀態 */
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: transparent;
  /* isolation: isolate; */
  color: #000;
}

/* 按鈕啟用狀態 */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #000;
  background-color: #e0d9e2;
  border-color: var(--c-assist2-03);
  /* border-bottom-color: #e0d9e2; */
  border-bottom-color: transparent;
}

@media(min-width:768px) {
  #sec3 .col-12 {
    transition: .5s;
  }

  #sec3 .col-12:hover {
    transform: scale(1.03);
  }

  #sec3 .col-12 img {
    transition: .5s;
  }

  #sec3 .col-12:hover img {
    box-shadow: 0 -4px 4px var(--c-nav-03);
  }

  /* #sec3 .col-12:hover~.col-12 {
    transform: scale(.8);
    opacity: .2;
  } */

  .scale-s {
    transform: scale(.85);
    opacity: .2;
  }

  /* CSS選取器只能管自己及晚輩, 不能管長輩 */
}


/* #sec4 area ================================== */
#sec4 .container-xl {
  background-image: url(./img/sec4m1.png);
  background-repeat: no-repeat;
  background-position: center top;
  padding-top: 170px;
}

#sec4 h3 {
  font-family: var(--f-family-1);
  margin-bottom: 1.5rem;
}

.accordion-button {
  font-family: var(--f-family-1);
  transition: .2s;
}

/* 沒有收合, 表示展開後 */
.accordion-button:not(.collapsed) {
  color: var(--c-assist1-10);
  background-color: transparent;
  box-shadow: none;
  font-size: 1.2rem;
  font-weight: 600;
}

.accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

.accordion-body {
  text-align: justify;
  padding: 0 2.5rem 3rem 1.3rem;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237805a0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}


@media(min-width: 768px) {
  #sec4 .container-xl {
    background-image: url(./img/sec4bg.png), url(./img/sec4bg2.png);
    background-repeat: no-repeat, repeat;
    background-size: 100% auto;
    padding-top: 0;
    min-height: 600px;
  }

  .accordion-body {
    padding: 0 3rem 3rem 3rem;
  }
}


/* #sec5 area ================================== */
#sec5 .container-xl {
  background-image: url(./img/contact.png);
  background-repeat: no-repeat;
  background-position: 25% top;
  background-size: auto calc(150px / 380px * 522px);
  padding-top: calc(150px / 380px * 522px - 20px);
}

form {
  background-color: white;
  border-radius: 10px;
  min-height: 500px;
  margin-bottom: 50px;
}

.form-star {
  color: var(--c-point-word);
  margin-right: .5rem;
}

.form-control:focus {
  border-color: var(--c-assist2-03);
  box-shadow: 0 0 0 .25rem var(--c-assist2-01);
}

.form-select:focus {
  border-color: var(--c-assist2-03);
  box-shadow: 0 0 0 .25rem var(--c-assist2-01);
}

.form-check-input:checked {
  background-color: var(--c-assist2-10);
  border-color: var(--c-assist2-03);
}

.form-check-input:focus {
  border-color: var(--c-assist2-03);
  outline: 0;
  box-shadow: 0 0 0 .25rem var(--c-assist2-01);
}



@media(min-width: 992px) {
  #sec5 .container-xl {
    background-position: left bottom;
    background-size: 25% auto;
    padding-top: 0;
  }
}

/* footer area ================================== */
footer {
  background-color: var(--c-nav-10);
  color: white;
  text-align: center;
  padding: 1rem;
}



/* swiper ======================================= */
.swiper {
  padding-bottom: 40px;
}

.mySwiper2 {
  width: 250px;
}

.mySwiper2 .swiper-slide-active {
  box-shadow: 0 0 6px rgba(0, 0, 0, .7);
  border-radius: 10px !important;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mySwiper2 .swiper-slide img {
  border-radius: 10px !important;
  max-width: 100%;
  height: auto;
}

.mySwiper2 .swiper-slide-active img {
  border-radius: 10px !important;
}

.mySwiper2 .swiper-slide span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  text-align: center;
  font-size: 22px;
  /* font-weight: bold; */
  color: white;
  text-shadow:
    0px -1px 1px #be166a,
    1px 0px 1px #be166a,
    0px 1px 1px #be166a,
    -1px 0px 1px #be166a;
}

.mySwiper1 .swiper-button-prev,
.mySwiper1 .swiper-rtl .swiper-button-next {
  left: 10px;
}

.mySwiper1 .swiper-button-next,
.mySwiper1 .swiper-rtl .swiper-button-prev {
  right: 10px;
}

.mySwiper1 .swiper-button-next:after,
.mySwiper1 .swiper-button-prev:after {
  color: rgba(0, 0, 0, 0.1);
  font-weight: bolder;
  font-size: 80px !important;
}

.mySwiper1 .swiper-button-next:hover:after,
.mySwiper1 .swiper-button-prev:hover:after {
  color: rgba(190, 22, 106, 0.5);
}

.mySwiper2 .swiper-button-prev,
.mySwiper2 .swiper-rtl .swiper-button-next {
  left: -60px;
  color: #be166a;
}

.mySwiper2 .swiper-button-next,
.mySwiper2 .swiper-rtl .swiper-button-prev {
  right: -60px;
  color: #be166a;
}

.mySwiper1 .swiper-pagination-bullet-active,
.mySwiper2 .swiper-pagination-bullet-active {
  background-color: #be166a;
}