@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Sans+SC&family=Noto+Sans+TC&family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

@font-face{
    font-family: 'Poppins';
    src: url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
}
@font-face{
    font-family: 'Noto Sans';
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
}

@font-face{
    font-family: 'Noto Serif TC';
    src: url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC&display=swap');
}

@font-face{
    font-family: "Noto Sans TC", sans-serif;
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
}
@font-face{
    font-family: 'Italiana';
    src: url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
}
@font-face{
    font-family: 'Inter';
    src: url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
}
@font-face{
    font-family: 'Roboto';
    src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
}

.tp-caption.very_big_white_t,
.very_big_white_t {
    background-color: transparent;
    color: #fff;
    font-family: 'Italiana', serif;
}

.tp-caption.small_light_white_inter,
.small_light_white_inter {
    background-color: transparent;
    color: #fff;
    font-family: 'Inter', sans-serif;

}

.hermes .tp-bullet {
    box-shadow: inset 0 0 0 1px #FFF !important;
}

.headerText {
    font-size: 16px !important;
    font-weight: 300 !important;
}

#bottomNEWS:not(.nav-arrows-1):not(.show-nav-title) .owl-nav button[class*="owl-"] {
    color: transparent;
}

#bottomNEWS.nav-style-3 .owl-nav .owl-next:before,
#bottomNEWS.nav-style-3 .owl-nav .owl-next:after,
#bottomNEWS.nav-style-3 .owl-nav .owl-prev:before,
#bottomNEWS.nav-style-3 .owl-nav .owl-prev:after {
    font-size: 0em !important;
}

#bottomNEWS.nav-style-3 .owl-nav {
    top: 45%;
}

#contactFormAdvanced * input {
    border: 0;
}

#header .header-nav.header-nav-links:not(.header-nav-light-text) nav>ul>li>a,
#header .header-nav.header-nav-line:not(.header-nav-light-text) nav>ul>li>a {
    color: #fff;
}
@media (max-width: 991px) {
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav>ul>li>a,
    #header .header-nav.header-nav-line:not(.header-nav-light-text) nav>ul>li>a,
    .l-nav__language>a{
        color: black !important;
    }
    .l-nav__language .slash{
        background-color: black !important;
    }
    .threethreethree div{
        padding-left:0;
    }
    .titleSize.zh {
        font-size: 4rem !important;
    }

    #whiteheader {
        display: none;
    }
    .header-row img{
        width: 95%;
    }
    .portfolio-list {
        height: auto !important;
    }
    .select-selected {
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
    }
}
#header .header-btn-collapse-nav {
    background: #777;
}
#header .header-nav.header-nav-links nav>ul li:hover>a {
    color: #0088CC;
}

.select-selected {
    font-size: 18px;
}

.select-items {
    font-size: 18px;
    font-weight: 200;
}

.same-as-selected {
    font-weight: 400 !important;
}

.font-weight-700 {
    font-weight: 700 !important;
}

.header-semi-transparent-light_g .header-body {
    background-color: rgba(20, 20, 20, 0.68) !important;
}

.inter {
    /*font-family: 'Inter', sans-serif;*/
    font-family: "Noto Sans TC", sans-serif !important;
    color: #000000;
}

.italiana {
    /*font-family: 'Italiana', serif;*/
    font-family: "Noto Sans TC", sans-serif !important;
    color: #000000;
}
.poppins {
    /*font-family: 'Poppins', serif;*/
    font-family: "Noto Sans TC", sans-serif !important;
    color: #000000;
}
.nameNowrap{
    white-space: nowrap; /* 不換行 */
    overflow: hidden; /* 隱藏超出部分 */
    text-overflow: ellipsis; /* 顯示省略號 */
}
.roboto {
    /*font-family: 'Roboto', sans-serif;*/
    font-family: "Noto Sans TC", sans-serif !important;
}
.notosans {
    font-family: "Noto Sans TC", sans-serif !important;
    color: #000000;
}
.zhFont {
    font-family: "Noto Sans TC", sans-serif !important;
    /* font-family: 'Noto Serif TC', serif;  使用有襯線字體 */
}

 /*如果 html 包含lang=zh 則所有css中有italiana 都換成zhFont*/
		html[lang="zh"] .italiana {
		    font-family: "Noto Sans TC", sans-serif !important;
			/*font-family: 'Noto Serif TC', serif !important;  使用有襯線字體 */
		}

/* 繁體中文 */
[lang="zh"] {
    font-family: "Noto Sans TC", sans-serif !important;
  /*font-family: 'Noto Serif TC', serif;  使用有襯線字體 */
}

hr {
    border-top: 1px solid;
}

.titleSize {
    font-size: 7rem;
}
.subtitleSize {
    font-size: 1.1rem;
}
.titleSize.zh {
    font-size: 5rem;
}
.thumb-info .thumb-info-wrapper:after {
    background-color: transparent !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 5%, #212529 100%);
}

.vr {
    color: #000000;
    width: 1.5px;
}

.font-small {
    font-size: small;
}

.blur {
    /*-webkit-filter: blur(0.04rem);
    -moz-filter: blur(0.04rem);
    -o-filter: blur(0.04rem);
    -ms-filter: blur(0.04rem);
    filter: blur(0.04rem);*/
    backdrop-filter: blur(4px);

}

.btn-white {
    border-color: white;
    color: white;
}
@media (max-width: 991px) {
      .borderhoverblack {
        border: none; /* 手機版移除外部邊框 */
      }

      .inner {
        border: 1px solid black;
        box-sizing: border-box; /* 確保 padding、border 和內容在一個框內 */
      }
    }
}
.borderhoverblack {
    border: 1px solid transparent;
}

.borderhoverblack:hover {
    border: 1px solid black;
}


.inner {
  background-color: #f8f9fa; /* 內容背景色 */
}

.btn-black {
    border-color: black;
    color: black;
}

.btn-hover-border-black {
    --bs-btn-hover-border-color: black;
}

.btn.btn-white:hover {
    border-color: white;
}

.full-width {
    width: 100%;
}

.thumb-info .thumb-info-title.thumb-info-title-vert-align {
    top: 75%;
}

.anim-hover-inner-wrapper:hover .anim-hover-inner-translate-top-100px {
    transform: translateY(-100px) !important;
}

.anim-hover-inner-wrapper:hover .anim-hover-inner-translate-top-80px {
    transform: translateY(-80px) !important;
}


.graybg {
    background-color: #e5e5e2 !important;
}

.footerbg {
    background-color: #191919 !important;
}

.white {
    color: #fff;
}

.black {
    color: #000000 !important;
}

.threethreethree,.threethreethree a{
    color: white !important;
    font-size: 1rem;
    line-height: 1.65rem;
    letter-spacing: 0.1em;
}
.threethreethree.zh, .threethreethree.zh a{
    color: white !important;
    font-size: 1.1rem;
    line-height: 1.6rem ;
    letter-spacing: 0.2em;
}
/* hover 和 focus 的顏色 */
.threethreethree a:hover, .threethreethree a:focus {
    color: white !important; /* hover 和 focus 顏色 */
}
.gray {
    color: #3D3D3D !important;
}

#header .header-nav-main nav>ul>li {
    padding: 10px;
}

.breadcrumb.breadcrumb-style-2>li+li:before {
    content: "》" !important;
}

.thumb-info,
.modal-content ,
.thumb-info-wrapper {
    border-radius: 0 !important;
}
/* 定義動畫，讓線從下往上長出來 */
        @keyframes growAnimation {
          from {
            height: 0; /* 從高度0開始 */
          }
          to {
            height: 100%; /* 最終高度佔滿父容器 */
          }
        }
		/* 設定垂直線的樣式 */
		  .vr {
			width: 1px; /* 你可以根據需求調整線的寬度 */
			background-color: black !important; /* 設置線的顏色 */
			height: 0; /* 初始高度為0 */
			transform-origin: bottom; /* 讓動畫從底部開始 */
			min-height: 0em !important;
			opacity: 1 !important;
		  }

		  /* 當應用grow-up類時觸發動畫 */
		  .vr.grow-up {
			animation: growAnimation 2.5s ease forwards 1.2s; /* 動畫持續5秒，從下往上生長 */
		  }
		/* 定義動畫，讓線條從左往右伸展 */
		  @keyframes growRight {
			from {
			  width: 0; /* 從寬度0開始 */
			}
			to {
			  width: 100%; /* 最終寬度佔滿容器 */
			}
		  }

		  /* 設定 hr 標籤的初始樣式 */
		  hr {
			width: 0; /* 初始寬度為0 */
			border: 0;
			border-top: 1px solid black; /* 設置線的樣式 */

		  }
		  /* 當應用grow-right類時觸發動畫 */
		  .grow-right {
			animation: growRight 4s ease forwards 2s; /* 動畫持續2秒，從左到右伸展 */
		  }
		  .l-nav__language .slash {
              margin: 0 10px;
              height: 15px;
              width: 2px;
              background-color: #FFFFFF;
              transform: rotate(30deg) translateY(1.5px);
          }
          .l-nav__language .chinese, .l-nav__language .english {
              /*font-weight: 500;*/
              color: #FFFFFF;
              /* opacity: 0.4; */
              white-space: nowrap;

          }
          .l-nav__language a:not(.btn):hover {
                text-decoration: none;
          }
          .l-nav__language .chinese, .l-nav__language .english {
              font-weight: 500;
              color: #FFFFFF;
              /* opacity: 0.4; */
              white-space: nowrap;
          }
          .l-nav__language .chinese.active, .l-nav__language .english.active {
              opacity: 1 !important;
          }