/*-----------------------
#index-ai-model
------------------------*/
#index-ai {
	padding:4.5vw 16.75vw 9.375vw;
}
#index-ai .model-inner{
    display: flex;
    flex-direction: column;
}
.ai-heading{
	padding-left:2vw;
}
.ai-heading p{
	margin-bottom:0;
}
.ai-heading .gradient-tag{
    display: inline-block;
    background-image: linear-gradient(95deg, #4583fe, #54e8cf);
    color: #fff;
    font-size: 1.563vw;
    padding: 0.12vw 0.7vw;
    margin-bottom: 1vw;
    border-radius: 0.375vw;
    font-weight: bold;
}
.ai-heading .text-caption{
	color:var(--c-black);
	font-size:var(--t42);
	font-weight:bold;
	line-height:1.3;
}
.ai-heading .text-gradient{
	font-weight:bold;
	font-size:var(--t42);
	color: transparent !important;
	background-clip: text;
	-webkit-background-clip: text;
	background-image: linear-gradient(95deg, #4583fe, #54e8cf);
	line-height:1.3;
}
.ai-heading .text-desc{
	color:var(--c-black);
	font-size:var(--t20);
	line-height:1.3;
	margin-top:1.2vw;
	margin-bottom:2vw;
}

.ai-tabs-content {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: 1.25vw;
}   
.tab-panel {
	grid-area: 1 / 1 / 2 / 2; /* 疊在同一個網格位置 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
	pointer-events: none;
}
.tab-panel.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* 圖片文字標籤樣式 (同前) */
.tab-panel .image-wrapper {
    position: relative;
    overflow: hidden;
    background: #f8f8f8;
    border-radius: 1.042vw;
}
.tab-panel .image-wrapper img { 
	width: 100%; 
	display: block; 
	height: auto; 
}
.tab-panel .label-box { 
	position: absolute; 
	color: #fff; 
	top: 10%; 
	left: 5%; 
	font-weight:bold;
	font-size: var(--t36); 
}
.tab-panel .label-box.text-black {
	color: #000; 
}
.tab-panel:nth-child(2) .label-box{
	display:none;
}
.nav-arrow-icon { 
	display: none; 
} 
.ai-tabs-nav {
    width: 72%;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #eee;
    margin: 0 auto;
}    
.ai-tabs-nav .nav-item {
    font-weight: 500;
    padding: 0.581vw 0px;
    color: #9a9a9a;
    cursor: pointer;
    font-size: var(--t20);
    transition: 0.3s;
    flex-shrink: 0;
}
.ai-tabs-nav .nav-item.active {
	position:relative;
    color: #007bff;
	color: transparent !important;
	background-clip: text;
	-webkit-background-clip: text;
	background-image: linear-gradient(95deg, #4583fe, #54e8cf);
}
.ai-tabs-nav .nav-item.active:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background:linear-gradient(95deg, #4583fe, #54e8cf);
}

/* --- 手機版樣式 --- */
@media (max-width: 991px) {
#index-ai { 
	padding: 13.5vw 0 13.375vw; 
}
.ai-heading {
    padding-left: 9vw;
}
.ai-heading .gradient-tag {
    font-size: 4.348vw;
    padding: 0.52vw 1.7vw;
    margin-bottom: 2.5vw;
    border-radius: 1.675vw;
}
.ai-heading .text-caption {
    font-size: 5.314vw;
}
.ai-heading .text-desc {
    margin-top: 2.2vw;
    margin-bottom: 5.2vw;
	color:#86868b;
}
.tab-panel .image-wrapper {
    border-radius: 1.842vw;
}

.ai-tabs-content {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/*-webkit-overflow-scrolling: touch;*/
	padding: 0 10%;
	gap: 12px;
	margin-bottom: 3.2vw;
}
.ai-tabs-content::-webkit-scrollbar { display: none; }

.tab-panel {
	flex: 0 0 100%;
	scroll-snap-align: center;
	opacity: 1 !important;
	visibility: visible !important;
}
.tab-panel .label-box { 
	font-size: 4.831vw;
	top: auto;
	bottom: 4.6%;
	left: 7%;
}
.nav-container-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	padding-right: 0px; 
}
.ai-tabs-nav {
	width: 78%;
	overflow-x: auto;
	white-space: nowrap;
	padding: 0;
	height: 100%;
	overflow-y:hidden;
}
.ai-tabs-nav .nav-item {
    padding: 1.881vw 3.25vw;
    font-size: 3.25vw;
}
.ai-tabs-nav .nav-item:first-child {
	padding-left:0;
}
.ai-tabs-nav::-webkit-scrollbar { display: none; }

.nav-arrow-icon {
	display: flex;
	position: absolute;
	right: 2%;
	background: #fff;
	z-index: 2;
	border-left: 1px solid #ccc;
	height: 96%;
	padding-left:2%;
	align-items: center;
}
.nav-arrow-icon svg {
	width:4.831vw;
	height:4.831vw;	
}
}
  
/*-----------------------
#index-video-scroll
------------------------*/
#index-video-scroll {
    position: relative;
    height: 400vh; 
}
#index-video-scroll .sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}
#index-video-scroll .video-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s linear;
}
#index-video-scroll .video-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; 
}
#index-video-scroll .text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; 
    padding: 0 5%;
    color: white;
    pointer-events: none;
    z-index: 10;
}
#index-video-scroll .overlay-heading {
    max-width: 73.958vw;
    margin: 0 auto;
    width: 100%;
}
#index-video-scroll .text-title { 
	font-size: var(--t42); 
	font-weight: bold; 
	line-height: 1.4; 
	margin-bottom: 0.8vw; 
}
#index-video-scroll .text-desc { 
	font-size: var(--t20); 
	font-weight: 500; 
	opacity: 1; 
	margin-bottom:0;
	line-height:1.3;
}

  /* --- 手機版專屬修正 --- */
  @media (max-width: 991px) {
#index-video-scroll { 
	height: 360vh; 
}
#index-video-scroll .text-overlay {
	padding: 0 8%;
	align-items: flex-end;
	padding-bottom: 28vw;
}
#index-video-scroll .overlay-heading {
    max-width: 100%;
}
    #index-video-scroll .text-title {
        line-height: 1.2;
        margin-bottom: 3.2vw;
    }
#index-video-scroll .text-desc { 

}
#index-video-scroll .video-content { 
object-position: center; 
}

    /* 手機版隱藏電腦版封面圖，改用 CSS 切換封面 (選用) */
#index-video-scroll .vid-pc-poster { 
display: none; 
}

}

/*-----------------------
#index-video-nav
------------------------*/
#index-3videos {
    position: relative;
    background-color: #000;
    width: 100%;
  }

  .v-sticky-box {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
  }

  .v-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .v-layer.active {
    opacity: 1;
  }

  .v-layer video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

/* 電腦/手機影片切換 */
@media (max-width: 991px) { .v-pc { display: none !important; } }
@media (min-width: 992px) { .v-mb { display: none !important; } }

  /* 捲動內容區塊：每個 200vh 確保文字跑完後影片能停留 */
  .v-section {
    position: relative;
    height: 200vh;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 使內容在區塊內相對居中 */
    padding-left: 12%;
    pointer-events: none;
  }

  .v-content-card {
    pointer-events: auto;
    max-width: 580px;
    color: white;
    /* 讓文字起始位置在 100vh 處，這樣捲動時才會從下往上經過螢幕中心 */
    margin-top: 50vh; 
  }

  /* 右側導航 */
  .v-nav-wrapper {
    position: fixed;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(0.781vw);
    border-radius: 2.083vw;
    padding: 0.625vw 0.313vw;
    display: flex;
    flex-direction: column;
    gap: 0.781vw;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.5s;
  }
  
  #index-3videos.show-nav .v-nav-wrapper {
    opacity: 1;
  }

  .v-dot-btn {
    cursor: pointer;
    width: 2.396vw;
    height: 2.396vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: #000;
    font-size: 0.938vw;
    transition: all 0.3s ease;
  }
  .v-dot-btn.active {
    background: #000;
    color: #fff;
    transform: scale(1);
  }
  .v-dot-btn img{
    width: 1.354vw;
    height: 1.354vw;
  }
  .v-dot-btn.active img{
  filter: invert(100%);
  //filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
  }

  /* 文字細節樣式 */
.v-label {
	display: inline-block;
	background: linear-gradient(180deg, #fff 0%, #dad7d7 100%);
    background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(218, 215, 215) 100%);
	color: #000;
    font-size: 1.563vw;
    padding: 0.12vw 0.7vw;
    margin-bottom: 1vw;
    border-radius: 0.375vw;
    font-weight: bold;
}
.v-h1 {
  font-size: var(--t42);
  font-weight: bold;
  line-height: 1.25;
  margin-bottom: 1.25vw;
}
.v-desc {
	font-weight:500;
  font-size: var(--t20);
  opacity: 1;
  line-height: 1.4;
  margin-bottom: 1.65vw;
}
.v-img {
  max-width: 22.917vw !important;
  border-radius: 0.833vw;
 /* box-shadow: 0 0.833vw 1.55vw rgba(0, 0, 0, 0.3);*/
}

@media (max-width: 991px) {
.v-section {
    padding-left: 9.5%;
}
.v-nav-wrapper {
	right: 6%;
	top: 20%;
	border-radius: 4.683vw;
	padding: 1.625vw 0.613vw;
	gap: 2.881vw;
	backdrop-filter: blur(0.281vw);
}
.v-dot-btn {
    width: 8.396vw;
    height: 8.396vw;
}
.v-label {
    font-size: 4.348vw;
    padding: 0.52vw 1.7vw;
    margin-bottom: 2.5vw;
    border-radius: 3.675vw;
}
.v-dot-btn img {
    width: 5.354vw;
    height: 5.354vw;
}
.v-h1 {
    margin-bottom: 2.375vw;
}
.v-desc {
    margin-bottom: 2.95vw;
}

.v-img {
    max-width: 36.22vw !important;
}

}