@charset "utf-8";
/* CSS Document */

/*-----css基本設定---------*/
/* ==================================== */
/* Mabry Pro 字體 @font-face 宣告 */
/* ==================================== */

/* --- Black (900) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-Black-Pro.eot');
    src: url('../MabryPro_font/Mabry-Black-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-Black-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-Black-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-Black-Pro.ttf') format('truetype');
    font-weight: 900; /* Black 對應數值 900 */
    font-style: normal;
    font-display: swap; /* 建議加入，改善字體載入體驗 */
}

/* --- Black Italic (900 Italic) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-BlackItalic-Pro.eot');
    src: url('../MabryPro_font/Mabry-BlackItalic-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-BlackItalic-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-BlackItalic-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-BlackItalic-Pro.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* --- Bold (700) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-Bold-Pro.eot');
    src: url('../MabryPro_font/Mabry-Bold-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-Bold-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-Bold-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-Bold-Pro.ttf') format('truetype');
    font-weight: 700; /* Bold 對應數值 700 */
    font-style: normal;
    font-display: swap;
}

/* --- Bold Italic (700 Italic) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-BoldItalic-Pro.eot');
    src: url('../MabryPro_font/Mabry-BoldItalic-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-BoldItalic-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-BoldItalic-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-BoldItalic-Pro.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* --- Italic (400 Italic) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-Italic-Pro.eot');
    src: url('../MabryPro_font/Mabry-Italic-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-Italic-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-Italic-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-Italic-Pro.ttf') format('truetype');
    font-weight: 400; /* Regular 對應數值 400 */
    font-style: italic;
    font-display: swap;
}

/* --- Light (300) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-Light-Pro.eot');
    src: url('../MabryPro_font/Mabry-Light-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-Light-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-Light-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-Light-Pro.ttf') format('truetype');
    font-weight: 300; /* Light 對應數值 300 */
    font-style: normal;
    font-display: swap;
}

/* --- Light Italic (300 Italic) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-LightItalic-Pro.eot');
    src: url('../MabryPro_font/Mabry-LightItalic-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-LightItalic-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-LightItalic-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-LightItalic-Pro.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

/* --- Medium (500) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-Medium-Pro.eot');
    src: url('../MabryPro_font/Mabry-Medium-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-Medium-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-Medium-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-Medium-Pro.ttf') format('truetype');
    font-weight: 500; /* Medium 對應數值 500 */
    font-style: normal;
    font-display: swap;
}

/* --- Medium Italic (500 Italic) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-MediumItalic-Pro.eot');
    src: url('../MabryPro_font/Mabry-MediumItalic-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-MediumItalic-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-MediumItalic-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-MediumItalic-Pro.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* --- Regular (400) --- */
@font-face {
    font-family: 'Mabry Pro';
    src: url('../MabryPro_font/Mabry-Regular-Pro.eot');
    src: url('../MabryPro_font/Mabry-Regular-Pro.eot?#iefix') format('embedded-opentype'),
         url('../MabryPro_font/Mabry-Regular-Pro.woff2') format('woff2'),
         url('../MabryPro_font/Mabry-Regular-Pro.woff') format('woff'),
         url('../MabryPro_font/Mabry-Regular-Pro.ttf') format('truetype');
    font-weight: 400; /* Regular 對應數值 400 */
    font-style: normal;
    font-display: swap;
}

*, body, h1, h2, h3, h4, h5, h6, a, p, select  {
	font-family: 'Mabry Pro', "微軟正黑體", "Microsoft JhengHei", sans-serif, Arial, Helvetica;
	font-weight: 400;
	/* 讓瀏覽器在載入字體時能更好地渲染文字 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

i {
    font-style: italic; /* 斜體文字會自動使用對應的 Italic 檔案 */
}

/*文字反選顏色*/
::selection, ::-moz-selection {
	background: #e78d09;
	color: #ffffff;
}

/*a:focus {
	background-color: #F7AD00 !important;
}*/
a {
	transition: .5s;
}
/*a:hover {
	filter:brightness(110%);
	transition: .5s;
}*/
/*a:focus img {
	-webkit-filter:saturate(0.2);
}*/


html {
	height: 100%;
	margin: 0;
}
body {
	margin: 0;
	min-height: 100%;
}

/*清除格式*/
.CleanFormat { 
	clear: both;
}
article::after, section::after {
	content: "";
	display: block;
	clear: both;
}

/*分隔線*/
.Dividers {
	margin: 1vw auto;
	width: 100%;
	height: 1px;
	background: #000;
}

/*------------------------WebStart----------------------*/
#wrap {
	display: block;
	position: relative;
}
/*-------------------------Header-----------------------*/
header {
	display: flex;
	position: fixed;
	width: 93vw;
	top: 0;
	left: 0;
	z-index: 50;
	padding: 1.5vw 2vw 1.5vw 5vw;
	background: linear-gradient(to bottom,  rgba(0,19,33,1) 0%,rgba(0,19,33,0) 100%);
	justify-content: space-between;
	align-items: center;
}

.Logo {
    width: 7%;
}

.HeaderBtn {
    display: flex;
    width: 8%;
    justify-content: space-between;
    align-items: center;
}

.socailIcon {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.socailIcon > div {
    width: 40%;
}

.HeaderBtn .socailIcon {
    width: 58%;
}

/*---------------------------Menu-----------------------*/
.Menu {
    display: block;
    position: fixed;
    z-index: 40;
    height: calc(100vh - 7vw);
    padding: 6vw 2vw 1vw;
    background: #062C46;
    width: 15%;
    top: 0;
    right: calc(0px - 4vw - 15%);
	transition: .5s;
}

.Menu.active {
	right: 0;
}

nav > ul > li {
    margin-bottom: 1vw;
}

nav ul li a {
    color: #fff;
}

nav > ul > li > a {
    font-size: 1.2vw;
    font-weight: 900;
}

nav ul li ul li a {
    font-size: 1vw;
}

nav ul li ul li {
    position: relative;
    padding-left: 1vw;
}

nav ul li ul li::before {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    width: 0.5vw;
    background: #fff;
    left: 0;
    top: calc(50% - 0.5px);
}

nav ul li.active a, nav ul li.active a:hover {
    
}

nav ul li a:hover {
	
}


/*-----手機版選單------*/
.MenuBtn {
	display: block;
	width: 25%;
}

.MenuBtn a {
    display: block;
    width: 100%;
    padding-top: 100%;
    position: relative;
}

.MenuBtn a span {
    display: block;
    position: absolute;
    width: 100%;
    height: 0.3vw;
    background: #ffffff;
    border-radius: 1vw;
    left: 0;
    transition: .5s;
}

.MenuBtn a span:nth-child(1) {
    top: 0;
}

.MenuBtn a span:nth-child(2) {
    top: calc(50% - 0.15vw);
    opacity: 1;
}

.MenuBtn a span:nth-child(3) {
    bottom: 0;
}

.MenuBtn a.active {
    transform: rotate(90deg);
}

/*-------------------------BODY-------------------------*/
article {
    display: block;
    position: relative;
}

section {
    position: relative;
}

/*-------------------------FOOTER-----------------------*/
footer {
    background: linear-gradient(to bottom,  rgba(0,79,135,1) 0%,rgba(0,19,33,1) 100%);
    padding: 1.8vw;
    color: #fff;
}

#footer {
    display: block;
}

.footerLogo {
    display: block;
    width: 7.7%;
    margin-bottom: 1vw;
}

.footerInfo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.copyright {
    font-size: 1vw;
}

footer .socailIcon {
    width: 5.5%;
}
/*--------------------------共用項目-------------------------------*/
img {
    display: block;
    width: 100%;
    height: auto;
}






/*----------自適應----------*/
.view_w {display: block;}
.view_m {display: none;}

/*----------影片背景----------*/
.videoBgBk {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
}

.videoBgBk video {
	/*position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);*/
	width: 100%;
	height: 100%;
	object-fit: cover; /* 讓影片填滿但不變形 */
}


/*----------右側固定按鈕----------*/
#FixedBtn {
}

/*--------------------------內容開始-------------------------------*/


/*---------------KV---------------*/
#KV {
    display: block;
    position: relative;
    width: 100%;
	height: 120vh;
}


#KV .videoBg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	overflow: hidden;
}

#KV .videoBg video {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 讓影片填滿但不變形 */
}


.KVTxt {
    display: block;
    position: absolute;
    top: 6vw;
    left: 5vw;
    color: #fff;
}

.KVTxt > span {
    display: block;
}

.KVTxt > span:first-child {
    font-weight: 900;
    font-size: 5vw;
    line-height: 5vw;
}

.KVTxt > span:last-child {
    font-size: 3.1vw;
    font-weight: 100;
}


.KVCES {
    display: flex;
    position: absolute;
    top: calc(100vh - 9vw);
    left: 5vw;
    align-items: center;
}

.KVCES img {
    width: 13vw;
    margin-right: 2vw;
}

.KVCES div {
    color: #fff;
}

.KVCES div span {
    font-size: 1.5vw;
    display: block;
    font-weight: bold;
}

#KV::after {
	content: "";
	display: block;
	position: absolute;
	height: 20vh;
	width: 100%;
	left: 0;
	bottom: 0;
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);	
}



/*---------- AMSC at CES 2026 ----------*/
#amsc {
    background: url("../images/bg_01.png") no-repeat, #000;
    background-position: left bottom;
    background-size: 90% auto;
    color: #fff;
    text-align: center;
    padding: 7vw 0 32vw;
}

#amsc h1 {
    font-size: 2.8vw;
    font-weight: bold;
	margin-bottom: 2vw;
}

.Content {
    font-size: 1.2vw;
}

.Content p {
    font-size: 1em;
	line-height: 1.5em;
}

#amsc .Content {
    width: 81%;
    margin: 0 auto;
	text-align: justify;
}

#amsc .Content p {
	margin-bottom: 1em;
}

#amsc .Content p:last-child {
	margin-bottom: 0;
}

/*---------- Get On The Ride ! ----------*/
#gotr {
    background: url("../images/bg_03.png") no-repeat top 15vw center, #000;
}

.gotrVideoBk {
    display: block;
    background: #000;
}

.gotrVideo {
    display: block;
    position: relative;
    width: 55%;
    padding-top: 34%;
    margin: 0 auto;
}

.gotrVideo > div {
    display: block;
    position: absolute;
}

.gotrVideo .top, .gotrVideo .bottom {
    width: 100%;
    left: 0;
}

.gotrVideo .top {
    top: -0.6vw;
}

.gotrVideo .bottom {
    bottom: -0.6vw;
}

.gotrVideo .left, .gotrVideo .right {
    height: 100%;
    top: 0;
}

.gotrVideo .left img, .gotrVideo .right img {
    width: auto;
    height: 100%;
}

.gotrVideo video {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.gotrVideo .left {
    left: -2vw;
}

.gotrVideo .right {
    right: -2vw;
}


.VideoPlayBtn {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.VideoPlayBtn a {
	display: block;
	width: 100%;
	height: 100%;
}

.VideoPlayBtn img {
    width: 5vw;
    left: calc(50% - 2.5vw);
    top: calc(50% - 2.5vw);
    position: absolute;
}



.gotrBk {
    background: rgba(0, 0, 0, .95);
}

.gotrBk::before {
    content: "";
    display: block;
    height: 7vw;
    background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}





.gotrBk h2 {
    font-size: 2.8vw;
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin-bottom: 5vw;
}



.gotrMenu {
    display: flex;
    justify-content: center;
    align-items: center;
	margin-bottom: 3vw;
}

.gotrMenuBtn a {
	display: block;
    color: #fff;
    font-weight: 900;
    font-size: 1.2vw;
    line-height: 1.2vw;
    padding: 0.5vw 1vw;
    border: 1px solid #fff;
    border-radius: 5vw;
	position: relative;
	overflow: hidden;
}

.gotrMenuBtn.active a {
    background: #fff;
    color: #004F87;
}

.gotrMenuBtn.active a::before {
    content: "";
    display: block;
    width: 0.8vw;
    height: 120%;
    position: absolute;
    top: -10%;
    left: -0.8vw;
    transform: rotate(15deg);
    background: #64DCF0;
	filter: opacity(0.5);
    animation-name: lightMove;
    animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes lightMove {
    from{
        left: -0.8vw;
    }
    to{
        left: 100%;
    }
}

.gotrArrowAni {
    display: block;
	position: relative;
    width: 4vw;
    height: 1px;
    background: #fff;
}

.gotrArrowAni::after {
    content: "";
    position: absolute;
    top: calc(-0.5vw + 0.5px);
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.5vw 0 0.5vw 1vw;
    border-color: transparent transparent transparent #fff;
    animation: arrow-move 1s linear infinite;
}

/* 定義箭頭移動和淡出的關鍵幀動畫 */
@keyframes arrow-move {
    /* 箭頭從左側淡入並移動到白線的中央 */
    0% {
        opacity: 0;
        transform: translateX(0%) scaleX(1); /* 讓箭頭從左側外出現 */
    }

    /* 箭頭在白線上移動的平穩階段 */
    10% {
        opacity: 1;
        transform: translateX(0) scaleX(1); /* 箭頭移動到白線起點 (0) */
    }
    
    80% {
        opacity: 1;
        transform: translateX(3vw) scaleX(1); /* 箭頭移動到白線終點前的位置 */
    }
    
    100% {
        opacity: 0; /* 完全淡出 */
        transform: translateX(3vw) scaleX(1.2); /* 移出右側 */
    }
}



.gotrContentBk {
	display: block;
    overflow: hidden;
}

.gotrContentBk > div {
    width: 400%;
	display: flex;
    position: relative;
    flex-wrap: nowrap;
    align-items: flex-start;
	left: 0;
	transition: .5s;
}



.gotrContentBk > div.cut_1 {
    height: 38vw;
}

.gotrContentBk > div.cut_2 {
    height: 65vw;
}

.gotrContentBk > div.cut_3 {
    height: 95vw;
}

.gotrContentBk > div.cut_4 {
    height: 65vw;
}


.slideImg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 上層圖片 (圖片 2) */
  background-image: url('../../data/gotr/pd_09.jpg');
  background-size: cover;
  background-position: center;
  
  /* 初始透明度為 0 (看不到) */
  opacity: 0;
  z-index: 1;
  
  /* 執行動畫：淡入淡出 */
  animation: fadeImage 8s infinite;
}

@keyframes fadeImage {
  0% {
    opacity: 0; /* 顯示底圖 (圖1) */
  }
  45% {
    opacity: 0; /* 維持顯示底圖 */
  }
  50% {
    opacity: 1; /* 淡入完成，顯示上層圖 (圖2) */
  }
  95% {
    opacity: 1; /* 維持顯示上層圖 */
  }
  100% {
    opacity: 0; /* 淡出回到底圖 */
  }
}


.gotrContentBk > div > div {
    width: 25%;
	padding-bottom: 5vw;
}

.gotrContentBk h3 {
    display: flex;
    font-size: 2.8vw;
    font-weight: 900;
    color: #fff;
    text-align: center;
    justify-content: space-between;
    align-items: center;
}

.gotrContentBk h3::before, .gotrContentBk h3::after {
    content: "";
    display: block;
    width: 40%;
    height: 0.5vw;
    background: #fff;
}





.gotrPorductsBk h4 {
    text-align: center;
    font-size: 2vw;
    color: #64DCF0;
    font-weight: bold;
    margin-bottom: 2vw;
}

.gotrProducts {
    display: flex;
    width: 80%;
    margin: 0 auto;
    align-items: center;
    margin-bottom: 5vw;
}

.gotrProductsImg {
    display: block;
    width: 50%;
    margin-right: 5%;
}

.gotrProductsInfo {
    display: flex;
    width: 45%;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
	position: relative;
}

.gotrProductsInfo h5 {
    font-size: 2vw;
    font-weight: bold;
    line-height: 2.2vw;
}

.gotrSlogan {
    font-size: 1.2vw;
    font-weight: bold;
    margin-bottom: 1vw;
	color: #88de64;
}

.gotrProductsInfo .Content p {
    line-height: 1.5em;
}

.gotrProductsInfo .Content {
    margin-bottom: 1vw;
}

.gotrProductsTag {
    display: flex;
    font-size: 1vw;
    color: #FFE664;
}

.gotrProductsTag span {
    display: block;
    font-size: 1em;
    padding-right: 0.5vw;
    margin-right: 0.5vw;
    border-right: 1px solid #FFE664;
    line-height: 1em;
}

.gotrProductsTag span:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.yttek_logo {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
}

.gotrProductsImg a {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    position: relative;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
	border-radius: 1vw;
    overflow: hidden;
}

.gotrProductsImg a div {
    display: block;
    position: absolute;
    opacity: 0;
    transition: .5s;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 230, 100, 0.2);
}

.gotrProductsImg a div img {
    display: block;
    margin: 0 auto;
    height: 10%;
    top: 45%;
    left: calc(50% - 1vw);
    width: auto;
    position: absolute;
    filter: drop-shadow(0 0 0.5vw #000);
}

.gotrProductsImg a:hover div {
    opacity: 1;
}




/*----------Automotive Retail----------*/
#ar {
	background: url("../images/bg_04.png") bottom center no-repeat;
	background-size: cover;
}

.arBg {
	background: rgba(0, 79, 135, .8);
	padding: 7vw 0;
}

#ar h2 {
    font-size: 2.8vw;
    font-weight: 900;
    color: #fff;
    text-align: center;
}

.arBg > div {
    width: 66%;
    margin: 0 auto;
}

#tmlis {
    border-bottom: 1px solid #fff;
    padding: 5vw 0;
}


#gt {
    padding-top: 5vw;
}


#ar h3 {
    font-size: 2.2vw;
    text-align: center;
    font-weight: 900;
    color: #FFE664;
    margin-bottom: 2vw;
}

#ar .Content {
    padding: 2vw;
    background: rgba(255, 255, 255, .65);
    border-radius: 1vw;
    color: #004f87;
    margin-bottom: 5vw;
}



.arProductsImg {
    display: flex;
    justify-content: center;
}

.arProductsImg > div {
    width: 20%;
    margin-right: calc(20% / 3);
}

.arProductsImg > div:last-child {
    margin-right: 0;
}

.arProductsImg a > div {
    display: block;
}

.arProductsImg a > div:first-child {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border-radius: 1vw;
    filter: drop-shadow(0 0 0.2vw black);
    position: relative;
    width: 100%;
    padding-top: 66.7%;
    overflow: hidden;
}

.arProductsImg a > div > div {
    display: block;
    background: rgba(255, 233, 111, .5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .5s;
}

.arProductsImg a > div > div img {
    position: absolute;
    width: auto;
    height: 1.5vw;
    top: calc(50% - 0.75vw);
    left: calc(50% - 0.5vw);
	filter: drop-shadow(0 0 0.3vw #453800);
}

.arProductsImg a:hover > div > div {
    opacity: 1;
}

.arProductsImg a > div:last-child {
    text-align: center;
    font-size: 1.2vw;
    font-weight: bold;
    color: #fff;
}



.tmlis_FC, .gt_FC {
	display: none;
	width: 70vw;
    flex-direction: row !important;
    align-items: flex-start;
}


.tmlis_FC_Img, .gt_FC_Img {
    width: 65%;
    margin-right: 2%;
}

.tmlis_FC_Content, .gt_FC_Content {
    width: 33%;
}

.tmlis_FC_Content h4 {
    font-size: 2vw;
    font-weight: bold;
    line-height: 2vw;
    margin-bottom: 1vw;
}

.tmlis_FC_Txt, .gt_FC_Txt {
    font-size: 1vw;
}

.LogoImg {
    display: block;
    width: 10vw;
	position: absolute;
    bottom: 2rem;
}

.LogoImg.noStiky {
    position: relative;
    bottom: 0;
    padding-top: 3rem;
}	


.gt_FC_Content h4 {
    margin-bottom: 0.5vw;
}

.gt_FC_Content h4 img {
	width: auto;
}

.gt_FC_Content h4 img.gt_logo_01 {
    height: 6vw;
}

.gt_FC_Content h4 img.gt_logo_02 {
    height: 2vw;
}

.gt_FC_Content h4 img.gt_logo_03 {
    height: 2vw;
}

.gt_specification {
    font-size: 1vw;
    color: #207200;
    margin-bottom: 1vw;
}


/*----------- News ----------*/
#news {
    background: #E3E3E3;
    padding: 7vw 0;
}

#news h2 {
    font-size: 2.8vw;
    text-align: center;
    font-weight: 900;
    color: #004f87;
    margin-bottom: 3vw;
}

.NewsList {
    display: block;
    width: 66%;
    margin: 0 auto 5vw;
}

.NewsList > ul > li {
    margin-bottom: 3vw;
	transition: opacity 0.5s;
}

.NewsList > ul > li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.NewsList ul li:nth-child(n + 4) {
    display: none; /* 初始狀態：隱藏 */
	opacity: 0;
}

.NewsImg {
    width: 35%;
    padding-top: 19.69%;
    margin-right: 5%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}

.NewsInfoBk {
    width: 60%;
}

.NewsDate {
    font-size: 1vw;
    color: #626262;
}

.NewsInfoBk h3 {
    color: #004F87;
    font-size: 1.3vw;
    font-weight: bold;
    line-height: 1.5vw;
    padding: 0.5vw 0;
}

.NewsDec {
    display: -webkit-box; /* 將元素設為彈性伸縮盒子模型 */
    -webkit-line-clamp: 3; /* 限制顯示的文本行數 */
    -webkit-box-orient: vertical; /* 設定子元素的排列方式 */
    overflow: hidden; /* 隱藏溢出的內容 */
    text-overflow: ellipsis; /* 在溢出時顯示省略號 */
    margin-bottom: 0.5vw;
    color: #626262;
	font-size: 1vw;
}

a .newsLink {
    display: block;
    background: #004f87;
    color: #fff;
    font-size: 1vw;
    padding: 0.25vw 0.5vw;
    text-align: right;
}

a:hover .newsLink {
    background: #ffe664;
    color: #004f87;
}

.NewsMoreBtn a {
    display: block;
    font-size: 1.2vw;
    font-weight: bold;
    margin: 0 auto;
    width: 8%;
    text-align: center;
    border: 1px solid #004f87;
    color:  #004f87;
    background: #fff;
    border-radius: 3vw;
}

.NewsMoreBtn a:hover {
    background: #ffe664;
}


/*---------- Event Highlight ----------*/
#eh {
	background: #fff;
	padding: 7vw 0;
}

#eh h2 {
	font-size: 2.8vw;
	font-weight: 900;
	margin-bottom: 2vw;
	color: #004F87;
	text-align: center;
}


.ehType {
    margin-bottom: 2vw;
}

.ehType ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.ehType li {
    margin-right: 1vw;
}

.ehType li:last-child {
    margin-right: 0;
}

.ehType a {
    display: block;
    padding: 0.2vw 0.5vw;
    font-size: 1vw;
    font-weight: bold;
    color: #004f87;
    border: 1px solid #004f87;
    border-radius: 2vw;
}

.ehType a.active {
	color: #fff;
    background: #004f87;
    font-weight: bold;
}


/* 容器樣式 */
.marquee-block {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 2vw;
}

.marquee-wrapper {
    margin: 1vw 0;
    width: 100%;
    /* 預設變數，JS 會覆蓋它 */
    --marquee-distance: 0px; 
}

/* 跑馬燈軌道 */
.marquee-track {
    display: flex;
    width: max-content; /* 讓寬度自適應內容 */
    
    animation-timing-function: linear; 
    animation-iteration-count: infinite;
    /* 預設時長，JS 可動態調整 */
    animation-duration: 20s; 
}

/* 跑馬燈內容區塊 */
.marquee-content {
    display: flex;
    flex-shrink: 0; /* 關鍵：禁止壓縮 */
}

/* 單張圖片項目 */
.marquee-item {
    width: 13vw;
    padding-top: 9.5vw;
    margin: 0 0.5vw;
    flex-shrink: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.marquee-item:hover {
    transform: scale(1.03); 
}

/* --- 上排動畫 (向左) --- */
/* 從 0 移動到 "負的單組寬度" */
.marquee-top .marquee-track {
    animation-name: marquee-left;
}

@keyframes marquee-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-1 * var(--marquee-distance))); } 
}

/* --- 下排動畫 (向右) --- */
/* 從 "負的單組寬度" 移動到 0 */
/* 原理：因為是向右跑，我們初始位置設在第二組(左移一組距離)，然後移回原點，看起來就像不斷從左邊冒出來 */
.marquee-bottom .marquee-track {
    animation-name: marquee-right;
}

@keyframes marquee-right {
    0% { transform: translateX(calc(-1 * var(--marquee-distance))); }
    100% { transform: translateX(0); }
}

/* --- 暫停 --- */
.marquee-wrapper.paused .marquee-track {
    animation-play-state: paused !important;
}

/* Tab 顯示控制 */
.category-content {
    display: none; /* 預設隱藏 */
    
    /* 確保切換時內容不會因為 margin collapse 而跳動 */
    overflow: hidden; 
}
.category-content.active {
    display: block;
}


.ehViewBtn a {
    display: block;
    font-size: 1.2vw;
    font-weight: bold;
    margin: 0 auto;
    width: 8%;
    text-align: center;
    border: 1px solid #004f87;
    color: #004f87;
    background: #fff;
    border-radius: 3vw;
}

.ehViewBtn a:hover {
    background: #ffe664;
}


/* View All */
#ehAlbum {
    display: block;
    position: fixed;
    transition: .5s;
    top: 101vh;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 50;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    filter: drop-shadow(0 0 0.2vw black);
}

#ehAlbum.active {
	top: 0;
}

.closeBtn {
    display: block;
    position: absolute;
    top: 2vw;
    right: 2vw;
    width: 3%;
    padding-top: 3%;
	z-index: 1;
}

.closeBtn a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5vw;
    background: #004f87;
}

.closeBtn a:hover {
    background: #ffe664;
}

.closeBtn a span {
    display: block;
    width: 80%;
    height: 0.5vw;
    background: #fff;
    position: absolute;
    top: calc(50% - 0.25vw);
    border-radius: 0.5vw;
    left: 10%;
}

.closeBtn a span:first-child {
    transform: rotate(45deg);
}

.closeBtn a span:last-child {
	transform: rotate(-45deg);
}


.album {
    display: none;
    position: absolute;
    overflow: auto;
    width: 90%;
    height: 80vh;
    top: 10vh;
    left: 5%;
}

.album.active {
    display: block;
}

.album ul {
    display: flex;
    flex-wrap: wrap;
}

.album ul li {
    display: block;
    width: 19%;
    margin: 0.5%;
}

.album ul li a {
    display: block;
    width: 100%;
    padding-top: 75%;
    cursor: pointer;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}




/*---------- 分隔線 ----------*/
.devLine {
	background: #fff;
	display: block;
}

.devLine::before {
	content: "";
	display: block;
	margin: 0 auto;
	width: 66%;
	height: 1px;
	background: #707070
}


/*---------- Video ----------*/
#video {
	padding: 7vw 0;
	background: #fff;
}

#video h2 {
	font-size: 2.8vw;
	font-weight: 900;
	margin-bottom: 2vw;
	color: #004F87;
	text-align: center;
}

/* 輪播容器 */
.video-slider {
    width: 100%; /* 依需求調整 */
}

/* --- 影片自適應容器 (RWD 關鍵) --- */
.video-container {
    position: relative;
	margin: 0 auto;
    width: 80%;
    /* 16:9 的比例計算方式：9 / 16 = 0.5625 -> 56.25% */
    padding-bottom: 45%; 
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-size: cover !important;
	background-position: center !important;
    z-index: 1; /* 影片在下層 */
}

.video-container a img {
    position: absolute;
    width: 8%;
    left: 46%;
    top: 12vw;
}

/* --- [關鍵 CSS] 遮罩層 --- */
.video-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
    background: rgba(0,0,0,0.01); /* 給一點點背景色確保能被點擊到 */
}

/* 隱藏遮罩的狀態 */
.video-cover.hidden {
    display: none;
}

/* --- [關鍵修正] 強制規則 --- */
/* 如果 Slide 沒有 slick-active class，遮罩必須強制顯示 (無視 .hidden) */
.slick-slide:not(.slick-active) .video-cover {
    display: block !important;
}

.slick-slide.slick-active {
    transform: scale(1);
}

.slick-slide {
    transform: scale(0.9);
}




/*---------- About AMS ----------*/
.videoBgBk.aamsTitleBg {
    position: fixed;
}

.aamsTitle {
    padding: 7vw 0;
    text-align: center;
    color: #fff;
}

.aamsTitle h2 {
    font-size: 4vw;
    font-weight: 900;
    color: #fff;
}

/*.aamsTitle h2 span:first-child {
    display: block;
    font-size: 2.5vw;
}

.aamsTitle h2 span:last-child {
    font-size: 2.8vw;
    display: block;
}

.aamsTitle h2 span {
    font-weight: 900;
}*/

#scamssp {
    display: block;
    /*padding-bottom: 28vw;
    background: url(../images/bg_05.png) bottom center no-repeat;
    background-size: 100% auto;*/
}

.scamsspBg {
    display: block;
    padding-top: 5vw;
	background: linear-gradient(to bottom,  rgba(11,79,135,1) 0%,rgba(0,16,27,1) 100%);
}


.scamsspTop {
    display: flex;
    align-items: center;
}

.scamsspInfoBk {
    width: 33%;
    margin-left: 17%;
	margin-right: 5%;
}

.scamsspImg {
    display: block;
    width: 45%;
	padding-top: 25%;
	background: url("../../data/aams/AUO-CES2025.jpg") no-repeat center;
	background-size: cover;
}

.scamsspInfoBk h3 {
    color: #FFE664;
    margin-bottom: 1vw;
}

.scamsspInfoBk h3 span {
    display: block;
    font-size: 1.9vw;
    font-weight: bold;
}

.scamsspInfoBk .content {
    font-size: 1vw;
    color: #fff;
}


.scamsspBottom {
    padding-top: 7vw;
}

.scamsspBottom h4 {
    text-align: center;
    font-size: 2.2vw;
    font-weight: bold;
    color: #fff;
    margin-bottom: 5vw;
}

.scamsspLogoBk {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-bottom: 5vw;
}

.scamsspLogoBk > div {
    margin-right: 4%;
}

.scamsspX {
    display: block;
    width: 3%;
    padding-top: 3%;
    position: relative;
    margin-top: 2vw;
}

.scamsspX span {
    display: block;
    width: 100%;
    height: 0.2vw;
    background: #fff;
    border-radius: 0.5vw;
    position: absolute;
    top: calc(50% - 0.25vw);
}

.scamsspX span:first-child {
    transform: rotate(45deg);
}

.scamsspX span:last-child {
    transform: rotate(-45deg);
}

.scamsspLogoBk > div:last-child {
    margin-right: 0;
}

.scamsspLogo {
    width: 14%;
}

.scamsspLogo > div:first-child {
    text-align: center;
    font-size: 1vw;
    font-weight: bold;
    margin-bottom: 0.5vw;
}

#BHTDLogo {
    color: #ff8d3f;
}

#BHTDLogo div:last-child {
    width: 80%;
    margin: 0 auto;
}

#AUOLogo > div:last-child {
    width: 75%;
    margin: 0 auto;
}

.scamsspSlogan {
    text-align: center;
    font-size: 2.2vw;
    font-weight: bold;
    color: #64dcf0;
    margin-bottom: 1vw;
}

.scamsspBottom .content {
    width: 48%;
    margin: 0 auto;
    color: #fff;
    font-size: 1vw;
}




/*---------- Company Snapshot ----------*/
.csBg {
    display: block;
    position: relative;
    z-index: 1;
    padding: 7vw 0;
    background: linear-gradient(to right,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,1) 100%);
}

#cs h2 {
    font-size: 2.8vw;
    text-align: center;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2vw;
}

#cs .content {
    color: #fff;
    margin: 0 auto 5vw;
    width: 50%;
    font-size: 1vw;
}

.csInfoBk {
    display: flex;
    width: 66%;
    margin: 0 auto;
    align-items: stretch;
}

.csInfoBk > div {
    width: 50%;
}

ul.csList {
    display: flex;
    align-items: stretch;
    margin-bottom: 2vw;
}

ul.csList li {
    width: 50%;
    border-right: 1px solid #fff;
    color: #fff;
    text-align: center;
}

.csInfoBk .csInfo:last-child li:last-child {
    border-right: none;
}

.csListInfo .S {
    font-size: 1vw;
    display: block;
    font-weight: 600;
}

.csListInfo {
    width: 65%;
    margin: 0 auto;
}

.csListInfo .L {
    display: block;
    font-size: 3vw;
    line-height: 4vw;
    font-weight: bold;
}

.csTxt {
    text-align: center;
    font-size: 1vw;
    width: 62%;
    margin: 0 auto;
    color: #64DCF0;
    font-weight: bold;
}

#cs h3 {
    font-size: 1.9vw;
    text-align: center;
    color: #FFE664;
    font-weight: bold;
}

#cs .videoBgBk {
    filter: hue-rotate(25deg);
}









/*---------- Worldwide Presences ----------*/
#wp {
    padding: 7vw 0;
    background: url("../images/bg_08.jpg") center no-repeat;
    background-size: cover;
}

#wp h2 {
    font-size: 2.8vw;
    text-align: center;
    color: #fff;
    font-weight: 900;
}

#wp h3 {
    font-size: 2.4vw;
    text-align: center;
    color: #fee564;
    margin-bottom: 5vw;
}

.Map {
    width: 90%;
    padding-top: 27.3%;
    margin: 0 auto;
    background: url("../images/map.png") top center no-repeat;
    background-size: contain;
    position: relative;
}

.Map ul {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
	width: 100%;
    height: 100%;
}

.Map ul li {
    display: block;
    position: absolute;
	transition: .5s;
}

.Map ul li:hover {
    transform: scale(1.1);
}

.Map ul li::before {
    content: "";
    display: block;
    width: 3.5vw;
    height: 4.7vw;
    background: url("../images/icon_location.png") center no-repeat;
    background-size: 120% auto;
    position: absolute;
	top: -1.5vw;
	z-index: 1;
}

.Map ul li::after {
    content: "";
    display: block;
    width: 2vw;
    height: 2vw;
    background: url("../images/map_Point.png") center no-repeat;
    background-size: contain;
    position: absolute;
	top: 0.9vw;
    z-index: 0;
}

.country {
    font-size: 1.5vw;
    line-height: 1.5vw;
    color: #f9e163;
    font-weight: bold;
	text-shadow: 0.05vw 0.05vw 0.15vw #102979;
}

.city {
    color: #fff;
    font-size: 1vw;
    line-height: 1vw;
	text-shadow: 0.05vw 0.05vw 0.15vw #102979;
}

#wp .Content {
    display: block;
    color: #fff;
    width: 46%;
    margin: -5vw auto 0;
    position: relative;
    text-align: center;
}


.Map ul li.l {
	transform-origin: -2.26vw 0.9vw;;
}

.Map ul li.r {
    text-align: right;
	transform-origin: calc(100% + 2.26vw) 0.9vw;
}

.Map ul li.b {
    text-align: center;
	transform-origin: calc(50% - 0.75vw) calc(100% + 3.2vw);
}

.Map ul li.t {
    text-align: center;
}

.Map .l::before {
    left: -3vw;
}

.Map .r::before {
    right: -3vw;
}

.Map .b::before {
    top: auto;
    bottom: -3.5vw;
    left: calc(50% - 1.5vw);
}

.Map .l::after {
    left: -2.26vw;
}

.Map .r::after {
    right: -2.26vw;
}

.Map .b::after {
    top: auto;
    bottom: -3.2vw;
    left: calc(50% - 0.75vw);
}


.Map .t::before {
    top: -3.7vw;
    left: calc(50% - 1.5vw);
}

.Map .t::after {
    top: -1.4vw;
    left: calc(50% - 0.75vw);
}



#maploc_1 {
    left: 19%;
    top: 21%;
}

#maploc_2 {
    left: 15%;
    top: 41%;
}

#maploc_3 {
    left: 35%;
    top: 13%;
}

#maploc_4 {
    left: 50%;
    top: 2%;
}

#maploc_5 {
    left: 50.5%;
    top: 18%;
}

#maploc_6 {
    left: 60.4%;
    top: 41%;
}

#maploc_7 {
    left: 70%;
    top: 30%;
}

#maploc_8 {
    left: 76%;
    top: 14%;
}

#maploc_9 {
    left: 84%;
    top: 23%;
}

#maploc_10 {
    left: 75.4%;
    top: 42.6%;
}

/*---------- Our Solutoins - Tailored to Evolve with Mobility ----------*/
#os {
    padding: 7vw 0 12vw;
    background: url(../images/bg_06_A.png) no-repeat top left, url(../images/bg_06_B.png) no-repeat bottom center, #000;
    background-size: 55% auto, 100% auto;
}

#os h2 {
    font-size: 2.4vw;
    font-weight: bold;
    text-align: center;
    color: #fff;
    margin-bottom: 4vw;
}

.osDec {
    width: 58%;
    margin: 0 auto 3vw;
    color: #fff;
    font-size: 1vw;
}

.osListBk {
    display: flex;
    width: 60%;
    margin: 0 auto 10vw;
    justify-content: space-between;
    align-items: stretch;
    text-align: center;
}

#os h3 {
    font-size: 3vw;
    text-align: center;
    font-weight: 900;
    color: #fee664;
}

.osListBk > div {
    padding: 2vw;
    width: calc(28% - 4vw);
    margin-right: 8%;
    transition: .5s;
}

.osListBk > div:first-child {
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,230,100,1) 100%);
}

.osListBk > div:nth-child(2) {
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(180,145,215,1) 100%);
}

.osListBk > div:last-child {
    margin-right: 0;
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(135,222,100,1) 100%);
}

.osListBk h5 {
    font-size: 1.8vw;
    font-weight: bold;
    color: #004f87;
    margin-bottom: 1vw;
}

.os_Img {
    display: block;
    width: 45%;
    margin: 0 auto 1vw;
}

.os_slogan {
    font-size: 1.1vw;
    font-weight: bold;
    color: #004e80;
    margin-bottom: 1vw;
}

.osInfo {
    color: #004f87;
    font-size: 1vw;
    width: 100%;
    margin: 0 auto;
}

.osListBk > div:hover {
    transform: scale(1.2);
}


/*---------------------------自適應內容----------------------------*/
/*--高--*/
@media only screen and (max-height: 820px) {

}
@media only screen and (max-height: 600px) {

}



/*--寬--*/

@media only screen and (max-width: 1280px) {

	
}

@media only screen and (max-width: 820px) {

}


@media only screen and (max-width: 720px) {
.view_w {display: none;}
.view_m {display: block;}
	
	
.Logo {
    width: 35%;
}

header {
    padding: 4vw 5vw;
    width: 90vw;
	background: rgb(0 78 128);
}

.HeaderBtn {
    width: 40%;
}

.MenuBtn a span {
    height: 1vw;
}

.MenuBtn a span:nth-child(2) {
    top: calc(50% - 0.5vw);
}

.Menu {
    width: 50%;
    padding: 25vw 5vw 5vw;
    height: calc(100vh - 30vw);
    right: calc(-50% - 10vw);
}

nav > ul > li {
    margin-bottom: 5vw;
}

nav > ul > li > a {
    font-size: 5vw;
}
	
	
/*----- FOOTER -----*/
.footerLogo {
    width: 30%;
    margin: 0 auto 5vw;
}

footer {
    padding: 5vw;
}

.footerInfo {
    display: block;
}

.copyright {
    font-size: 3vw;
}

footer .socailIcon {
    display: none;
}
	
	
	
/*----- 共用項目 -----*/
.Content {
    font-size: 4vw;
}
	
.Content p {
    font-size: 1em;
    line-height: 1.5em;
}
		
	
	
/*---------- KV ----------*/
#KV {
	height: 90vh;
}

.KVTxt {
    top: 25vw;
}

.KVTxt > span:first-child {
    font-size: 12vw;
    line-height: 15vw;
}

.KVTxt > span:last-child {
    font-size: 7vw;
}

.KVCES img {
    width: 38vw;
    margin-right: 0;
    margin-bottom: 2vw;
}

.KVCES {
    flex-direction: column;
    align-items: flex-start;
    top: calc(100vh - 55vw);
	z-index: 1;
}

.KVCES div span {
    font-size: 4.9vw;
}	
	
	
/*---------- amsc ----------*/
#amsc {
    padding: 10vw 0 55vw;
    background-size: 165%;
    background-position: -6vw bottom;
}

#amsc h1 {
    font-size: 7vw;
    line-height: 10vw;
    margin-bottom: 5vw;
}

#amsc .Content {
    width: 90%;
	text-align: left;
}


/*---------- GOTR ----------*/
#gotr {
    padding-top: 10vw;
}

.gotrVideo {
    width: 95%;
    padding-top: 58%;
}

.VideoPlayBtn img {
    width: 15vw;
    left: calc(50% - 7.5vw);
    top: calc(50% - 7.5vw);
}	
	
.gotrBk h2 {
    font-size: 7vw;
}
	
.gotrMenu {
    margin-bottom: 10vw;
}
	

.gotrMenuBtn a {
    font-size: 4vw;
    line-height: 4vw;
    padding: 2vw 1.5vw;
}

.gotrMenuBtn.active a::before {
    width: 4vw;
}

.gotrArrowAni {
    width: 3vw;
}

.gotrArrowAni::after {
    border-width: 2vw 0 2vw 2vw;
    top: calc(-2vw + 0.5px);
    animation: arrow-move_m 1s linear infinite;
}
	
	
.gotrContentBk h3 {
    font-size: 6vw;
}

.gotrContentBk h3::before, .gotrContentBk h3::after {
    width: 30%;
}

.gotrPorductsBk h4 {
    font-size: 5vw;
    margin-bottom: 10vw;
}

.gotrProducts {
    width: 90%;
    flex-direction: column;
    margin-bottom: 15vw;

}

.gotrProductsImg {
    width: 100%;
    margin-bottom: 4vw;
    margin-right: 0;
}

.gotrProductsImg a div img {
    height: 10vw;
    top: calc(50% - 5vw);
    left: calc(50% - 2vw);
}	
	
.gotrProductsInfo {
    width: 100%;
}

.gotrProductsInfo h5 {
    font-size: 6vw;
    line-height: 7vw;
}

.gotrSlogan {
    font-size: 4.2vw;
    margin-bottom: 4vw;
}
	
.gotrProductsInfo .Content {
    margin-bottom: 4vw;
}

.gotrProductsTag {
    font-size: 4vw;
    flex-wrap: wrap;
}

.gotrProductsTag span {
    padding-right: 3vw;
	margin-right: 3vw;
    line-height: 1.5em;
}

.yttek_logo {
    width: 30%;
}	
	
	
.gotrContentBk > div.cut_1 {
    height: 200vw;
}

.gotrContentBk > div.cut_2 {
    height: 350vw;
}

.gotrContentBk > div.cut_3 {
    height: 530vw;
}

.gotrContentBk > div.cut_4 {
    height: 350vw;
}

	

	
	
/*---------- ar ----------*/
.arBg {
    padding: 10vw 0;
}

#ar h2 {
    font-size: 7vw;
}

#tmlis {
    padding: 10vw 0;
}

.arBg > div {
    width: 90%;
}

#ar h3 {
    font-size: 6vw;
    margin-bottom: 5vw;
}

.arProductsImg > div {
    width: 45%;
    margin-right: 10%;
    margin-bottom: 5vw;
}
	
.arProductsImg > div:nth-child(even) {
	margin-right: 0;
}

.arProductsImg {
    display: flex;
    flex-wrap: wrap;
}
	
	
.arProductsImg a > div > div {
    animation: MobileAni 5s infinite;
}

.arProductsImg a > div > div img {
    height: 10vw;
    top: calc(50% - 5vw);
    left: calc(50% - 2vw);
}


.arProductsImg a > div:last-child {
    font-size: 3.8vw;
}
	
	
	
.tmlis_FC, .gt_FC {
    width: 90%;
    flex-direction: column !important;
    height: 80%;
    overflow: auto;
}

.tmlis_FC_Img, .gt_FC_Img {
    width: 100%;
    margin-right: 0;
    margin-bottom: 3vw;
}

.tmlis_FC_Content, .gt_FC_Content {
    width: 100%;
}

.tmlis_FC_Content h4 {
	font-size: 6vw;
	text-align: center;
	line-height: normal;
	margin-bottom: 5vw;
}

.tmlis_FC_Txt, .gt_FC_Txt {
    font-size: 4vw;
}
	
.LogoImg {
    width: 30vw;
    padding-top: 10vw;
	position: relative;
	bottom: auto;
}	
	
.LogoImg.noStiky {
    position: relative;
    bottom: 0;
    padding-top: 4rem;
}	
	
	
	
#gt {
    padding-top: 10vw;
}

.gt_FC_Content h4 {
    margin-bottom: 1vw;
}

.gt_FC_Content h4 img {
    margin: 0 auto;
}

.gt_FC_Content h4 img.gt_logo_01 {
    height: 17vw;
}

.gt_specification {
    font-size: 4vw;
    text-align: center;
}

.gt_FC_Content h4 img.gt_logo_02 {
    height: 8vw;
}

.gt_FC_Content h4 img.gt_logo_03 {
    height: 8vw;
}
	
	
	
/*---------- NEWS ----------*/
#news {
    padding: 10vw 0;
}

#news h2 {
    font-size: 7vw;
    margin-bottom: 5vw;
}

.NewsList {
    width: 90%;
}

.NewsList > ul > li {
    margin-bottom: 10vw;
}
	
.NewsList > ul > li a {
    flex-direction: column;
    align-items: center;
}

.NewsImg {
    width: 100%;
    padding-top: 56.25%;
    margin-right: 0;
    margin-bottom: 2vw;
}

.NewsDate {
    font-size: 3vw;
}

.NewsInfoBk {
    width: 100%;
}

.NewsInfoBk h3 {
    font-size: 5vw;
    line-height: 6vw;
    padding: 0;
    margin-bottom: 2vw;
}

.NewsDec {
    font-size: 4vw;
    margin-bottom: 2vw;
}

a .newsLink {
    font-size: 5vw;
    text-align: center;
}

.NewsMoreBtn a {
    font-size: 5vw;
    width: 30%;
    border-radius: 5vw;
}
	
	
/*---------- eh ----------*/
#eh {
    padding: 10vw 0;
}

#eh h2 {
    font-size: 7vw;
    margin-bottom: 2vw;
}

.ehType li {
    margin-right: 2vw;
    margin-bottom: 2vw;
}

.ehType a {
    font-size: 4vw;
    border-radius: 5vw;
    padding: 1vw 2vw;
}

.marquee-wrapper {
    margin: 2.5vw;
}	
	
.marquee-item {
	width: 40vw;       /* 放大到 40% (一排約 2.5 張) */
	padding-top: 29vw; /* 維持比例 (40 * 0.73) */
	margin: 0 1vw;     /* 間距稍微加大 */
	/* 手機版單個項目總佔比是 40+1+1 = 42vw */
}	
	
.ehViewBtn a {
    font-size: 5vw;
    width: 30%;
    border-radius: 5vw;
}

.closeBtn {
    top: 5vw;
    right: 5vw;
    width: 10vw;
    padding-top: 10vw;
}

.album ul li {
    width: 30%;
    margin: 0 5% 3vw 0;
}

.album ul li:nth-child(3n) {
    margin-right: 0;
}
	
.devLine::before {
    width: 90%;
}
	
	
/*---------- video ----------*/
#video {
    padding: 10vw 0 30vw;
}

#video h2 {
    font-size: 7vw;
}
	
.video-container {
	width: 100%;
	padding-bottom: 56.25%;
}
	
.video-container a img {
    width: 15%;
    left: 42.5%;
    top: 20vw;
}	
	
	
/*---------- aamsc ----------*/
.aamsTitle {
    padding: 20vw 0;
}

.aamsTitle h2 {
    font-size: 10vw;
}

.scamsspBg {
    padding-top: 10vw;
}

.scamsspTop {
    flex-direction: column;
}

.scamsspInfoBk {
    width: 90%;
    margin: 0 auto 5vw;
}

.scamsspInfoBk h3 {
    margin-bottom: 2vw;
}

.scamsspInfoBk h3 span {
    font-size: 5.4vw;
}

.scamsspInfoBk .content {
    font-size: 4vw;
}

.scamsspImg {
    width: 90%;
    padding-top: 60%;
}

.scamsspBottom h4 {
    font-size: 5vw;
    margin-bottom: 9vw;
}

.scamsspLogoBk {
    margin-bottom: 10vw;
}

.scamsspLogo {
    width: 31%;
}

.scamsspLogo > div:first-child {
    font-size: 4vw;
    margin-bottom: 2vw;
}

.scamsspX {
    width: 8%;
    padding-top: 8%;
}

#BHTDLogo > div:last-child {
    width: 85%;
    margin: 0 auto;
}

.scamsspLogoBk > div {
    margin-right: 5vw;
}

.scamsspBottom {
    padding-top: 15vw;
}

.scamsspSlogan {
    font-size: 6vw;
    margin-bottom: 2vw;
}

.scamsspBottom .content {
    width: 90%;
    font-size: 4vw;
}
	
	
/*---------- cs ----------*/
.csBg {
    padding: 10vw 0 15vw;
}

#cs h2 {
    font-size: 7vw;
    margin-bottom: 5vw;
}

#cs .content {
    font-size: 4vw;
    width: 90%;
    margin-bottom: 15vw;
}

.csInfoBk {
    flex-direction: column;
    width: 90%;
}

.csInfoBk > div {
    width: 100%;
}

.csInfoBk > div:first-child {
    margin-bottom: 10vw;
}

ul.csList li:last-child {
    border-right: none;
}

.csListInfo {
    width: 100%;
}

.csListInfo .L {
    font-size: 10vw;
    line-height: 12vw;
}

.csListInfo .S {
    font-size: 4vw;
}

.csTxt {
    width: 100%;
    font-size: 4vw;
}

#cs h3 {
    font-size: 5vw;
}
	
	
	
/*---------- wp ----------*/
#wp {
    padding: 10vw 0 0;
}

#wp h2 {
    font-size: 7vw;
}

#wp h3 {
    font-size: 5vw;
}
	

#Map {
    display: block;
    position: relative;
    overflow: auto;
}
	

.Map {
	width: 300%;
	padding-top: 92%;
}

#wp .Content {
	width: 90%;
	margin-top: -37.6vw;
	/*background: rgba(0, 0, 0, 0.5);
	padding: 5% 5% 20vw;*/
	padding-bottom: 20vw;
	text-align: left;
}

.country {
    font-size: 5vw;
    line-height: 5vw;
}

.city {
    font-size: 4vw;
    line-height: 4vw;
}

.Map ul li::before {
    width: 10vw;
    height: 11vw;
}

.Map ul li::after {
    width: 10vw;
    height: 10vw;
    top: 2vw;
}

.Map .l::before {
    left: -8vw;
}

.Map .l::after {
    left: -8vw;
}

.Map .r::before {
    right: -8vw;
}

.Map .r::after {
    right: -8vw;
}

.Map .b::before {
    bottom: -8.5vw;
    left: calc(50% - 4.5vw);
}

.Map .b::after {
    bottom: -11.2vw;
    left: calc(50% - 4.25vw);
}

.Map .t::before {
    top: -9vw;
    left: calc(50% - 4.5vw);
}

.Map .t::after {
    top: -5.5vw;
    left: calc(50% - 4.25vw);
}	
	
#maploc_2 {
    top: 39%;
}

#maploc_7 {
    left: 69%;
    top: 28%;
}	
	
#maploc_9 {
    left: 83.5%;
    top: 20.5%;
}

#maploc_10 {
	left: 75.5%;
	top: 42%;
}
	
	
/*----- 地圖手指動態 -----*/	
#FingerAni.view_m {
     position: absolute; /* 相對於視窗定位 */
     top: 0;
     left: 0;
     width: 100%;
     height: 59%;
     z-index: 1; /* 確保它在所有元素之上 */
	 background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.8) 25%,rgba(0,0,0,0.8) 75%,rgba(0,0,0,0.5) 95%,rgba(0,0,0,0) 95.1%,rgba(0,0,0,0) 100%);
     opacity: 1; /* 初始完全不透明 */
     transition: opacity 0.4s ease-out; /* 點擊時的淡出動畫 */
}

/* 確保點擊後能隱藏 */
#FingerAni.hide {
    opacity: 0;
    pointer-events: none; /* 讓點擊能穿透到下層元素 */
}


/* -------------------------------------------
 * 2. 動畫元素容器與定位
 * ------------------------------------------- */
#FingerAni > div {
    position: absolute;
}	
	
#FingerAni .finger {
    /* 容器定位：將手指稍微往上拉，讓箭頭位於其下方 */
    width: 24%;
    bottom: 15%;
    left: 38%;
}

#FingerAni .fingerArrow {
    /* 容器定位：將箭頭放在手指的下方中央 */
    top: 24%; /* 將箭頭往上移動，靠近手指 */
	left: 28vw;
    width: 20%;
}


/* -------------------------------------------
 * 4. 將動畫應用到元素上
 * ------------------------------------------- */

#FingerAni .finger img {
	opacity: 0;
    /* 設定旋轉中心在圖片底部中央 */
    transform-origin: 50% 100%; 
    /* 應用動畫：2秒、來回播放、無限循環、緩入緩出 */
    animation: fingerRotate 2s ease-in-out infinite;
}

#FingerAni .fingerArrow img {
	opacity: 0;
    /* 應用動畫：2秒、來回播放、無限循環、緩入緩出 */
    animation: arrowSlide 2s ease-in-out infinite;
}
	
	
	
	
/*---------- os ----------*/
#os {
    padding: 10vw 0 20vw;
    background-size: 100% auto;
}

#os h2 {
    font-size: 7vw;
}

.osDec {
    width: 90%;
    font-size: 4vw;
    margin-bottom: 10vw;
}

.osListBk {
    width: 90%;
    flex-direction: column;
	margin-bottom: 20vw;
}

.osListBk > div {
    padding: 5vw;
    width: calc(85% - 10vw);
    margin: 0 auto 5vw !important;
}

.osListBk h5 {
    display: block;
    width: 100%;
    font-size: 8vw;
}

.os_slogan {
    font-size: 5vw;
}

.osInfo {
    font-size: 4vw;
}

#os h3 {
    font-size: 8vw;
}
	
	
}

/* 定義箭頭移動和淡出的關鍵幀動畫 */
@keyframes arrow-move_m {
    /* 箭頭從左側淡入並移動到白線的中央 */
    0% {
        opacity: 0;
        transform: translateX(-30%) scaleX(1); /* 讓箭頭從左側外出現 */
    }

    /* 箭頭在白線上移動的平穩階段 */
    10% {
        opacity: 1;
        transform: translateX(-30%) scaleX(1); /* 箭頭移動到白線起點 (0) */
    }
    
    80% {
        opacity: 1;
        transform: translateX(1.5vw) scaleX(1); /* 箭頭移動到白線終點前的位置 */
    }
    
    100% {
        opacity: 0; /* 完全淡出 */
        transform: translateX(1.5vw) scaleX(1.2); /* 移出右側 */
    }
}

/* -------------------------------------------
 * 3. 動畫關鍵影格 (Keyframes)
 * ------------------------------------------- */

/* 手指旋轉動畫：從 20 度到 -20 度 */
@keyframes fingerRotate {
    0% {
		opacity: 0;
        transform: rotate(20deg);
    }
	30% {
		opacity: 1;
        transform: rotate(20deg);
	}
	40% {
		opacity: 1;
        transform: rotate(20deg);
	}
	80% {
		opacity: 1;
        transform: rotate(-20deg);
	}
    100% {
		opacity: 0;
        transform: rotate(-20deg);
    }
}

/* 箭頭平移動畫：從左向右平移 */
@keyframes arrowSlide {
    0% {
		opacity: 0;
        transform: translateX(2vw); /* 初始位置靠左 */
    }
	30% {
		opacity: 0;
        transform: translateX(2vw); /* 初始位置靠左 */
    }
	40% {
		opacity: 1;
        transform: translateX(2vw); /* 初始位置靠左 */
    }
	80% {
		opacity: 1;
        transform: translateX(-20vw); /* 初始位置靠左 */
    }
    100% {
		opacity: 0;
        transform: translateX(-20vw); /* 結束位置靠右 */
    }
}



@keyframes MobileAni{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}