/* https://fonts.google.com/  字型網址 */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
:root {
  --home-color-main: #38b8a4;
  --home-color-main-o: rgba(0, 79, 79, 0.3);
  --home-color-second: #668f95;
  --home-color-white: #fff;
  --home-color-white-o: rgba(255, 255, 255, 0.3);
  --home-color-black: #000;
  --home-color-black-o: rgba(0, 0, 0, 0.3);
  --home-color-origin: #757575;
  --home-color-tr: transparent;
  --home-font-en: 'Roboto', sans-serif;
  --home-font-tw: 'Noto Sans TC', sans-serif;
}
/* 改字體範例 */
/* . {
  font-family: var(--home-font-en);
} */

/* 01 */
/* -------------------------------------------------- */

/* 左邊滾動點點 */
.arch02-template-01-progress .bar div::before {
  background-color: var(--home-color-white);
}
/* 左邊滾動線 */
.arch02-template-01-progress .bar div::after {
  background-color: var(--home-color-white);
}
/* 左邊滾動深色點點 */
.arch02-template-01-progress.dark .bar::after,
.arch02-template-01-progress.dark .bar::before,
.arch02-template-01-progress.dark .bar div::before,
.arch02-template-01-progress.dark .bar div::after {
  background-color: #38b8a4;
}
/* 滾動文字 */
.arch02-template-01-progress {
  color: var(--home-color-white);
}
/* -------------------------------------------------- */

/* 滾動深文字 */
.arch02-template-01-progress.dark {
  color: #38b8a4;
}
/* 02 */
/* -------------------------------------------------- */

/* 直線 */
.arch02-template-02 .text_box .memo::before {
  background-color: #231815;
}
/* 播放鍵邊框 */
.arch02-template-02.show .playvideo {
  border: 1px solid var(--home-color-white);
}
/* 播方鍵3角形 */
.arch02-template-02 .playvideo::after {
  border-color: transparent transparent transparent var(--home-color-white);
}
/* 播放鍵hover */
.arch02-template-02 .playvideo:hover {
  background-color: var(--home-color-main);
  border-color: var(--home-color-main);
}
/* 滾動 */
.arch02-template-02 .scroll::after {
  border-right: 1px solid var(--home-color-white);
  border-bottom: 1px solid var(--home-color-white);
}
/* -------------------------------------------------- */

/* 04 */
/* -------------------------------------------------- */

/* 右邊文字 */
.arch02-template-04 .arch02-template-04__swiper-slide .text {
  color: var(--home-color-main);
}
/* 右邊文字底線 */
.arch02-template-04 .arch02-template-04__swiper-slide::after {
  background-color: var(--home-color-origin);
}
/* 右邊文字底線hover */
.arch02-template-04 .arch02-template-04__swiper-slide.active::after {
  background-color: #38b8a4;
}
.arch02-template-04__swiper-bottom {
  color: var(--home-color-main);
}
/* -------------------------------------------------- */

/* 06 */
/* -------------------------------------------------- */

/* 右邊文字底線 */
.arch02-template-06 .info_box .text_box {
  border-bottom: 1px solid var(--home-color-origin);
}
/* -------------------------------------------------- */

/* 07 */
/* -------------------------------------------------- */

/* 輪播點點hover */
.arch02-template-07__swiper-pagination
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--home-color-white);
  background-color: var(--home-color-white);
}
/* 輪播按鈕色 */
.arch02-template-07__swiper-bottom .icon {
  color: var(--home-color-white);
}
/* 輪播點點 */
.arch02-template-07__swiper-pagination .swiper-pagination-bullet {
  background-color: var(--home-color-white);
}

/* -------------------------------------------------- */

/* 08 */
/* -------------------------------------------------- */

/* 文字底線 */
.arch02-template-08 .text_box::after {
  background-color: #38b8a4 !important;
}

/* 輪播按鈕色 */
.arch02-template-08__swiper-bottom .icon {
  color: #38b8a4;
}
/* 輪播點點 */
.arch02-template-08
  .arch02-template-08__swiper-pagination
  .swiper-pagination-bullet {
  background-color:  #38b8a4;
}

/* -------------------------------------------------- */

/* 09 */
/* -------------------------------------------------- */

/* 輪播點點 */
.arch02-template-09
  .arch02-template-09__swiper-pagination
  .swiper-pagination-bullet {
  background-color: var(--home-color-white);
}

/* -------------------------------------------------- */

/* 10 */
/* -------------------------------------------------- */

/* 底線底色 */
.arch02-template-10 .swiper-pagination-progressbar {
  background-color: var(--home-color-white-o);
}
/* 底線顏色 */
.arch02-template-10
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background-color: var(--home-color-white);
}
/* -------------------------------------------------- */

/* 11 */
/* -------------------------------------------------- */

/* 垂直線 */
.arch02-template-11 .text_box div:last-child::after {
  background-color: var(--home-color-origin);
}
/* 大影片區塊*/
/* -------------------------------------------------- */

/* 播放按鈕邊框色 */
.arch02-template-12 .play {
  border: 1px solid var(--home-color-main);
}
/* 播放按鈕hover邊框色跟背景色 */
.arch02-template-12 .play:hover {
  background-color: var(--home-color-white);
  border: 1px solid var(--home-color-white);
}
/* 播放按鈕三角形色 */
.arch02-template-12 .play::after {
  border-color: transparent transparent transparent var(--home-color-main);
}
/* 播放按鈕叉叉色 */
.arch02-template-12 .play::before {
  color: var(--home-color-main);
}
/* -------------------------------------------------- */



.arch02-template-02 .text_box {
    width: 50%;
}

.arch02-template-10 .one_swiper .swiper-slide-active .name,
.arch02-template-10 .one_swiper .swiper-slide-active .type {
    color: #231815 !important;
}


.c-btn--more {
    border: 1px solid #a5a1a0;
}


.c-btn--more.is-white {
    border-color: #a19d9c;
}

.c-btn--more.is-white::after {
    color: #38b8a4;
}


/* 左錨點改色 */

.arch02-template-01-progress.dark {
    color: #38b8a4;
}


.c-btn--more:hover {
    border-color: #38b8a4;
    background: #38b8a4;
    box-shadow: 0 0 0 2px #38b8a4 inset;
}

@media (max-width: 1500px){
.arch02-template-02 .text_box .memo {
    font-size: 30px;
}
}

.arch02-template-02 .text_box .memo {
    font-size: 30px;
}

/* 影響700以下 */
@media (max-width: 700px) {

  .arch02-template-02 .text_box {
    width: 80%;
  }

  .arch02-template-02 .text_box .memo {
    font-size: 16px;
  }

  .arch02-template-08 .text_area {
    top: 26%;
  }
}