@charset "utf-8";

/* CSS Document */
body{font-family:'Noto Sans TC','微軟正黑體',sans-serif;font-size:16px;font-size: 1.25rem;line-height:1.5;color:var(--black);}
body::after {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:#fff;z-index: 9999;pointer-events: none;opacity: 0;-webkit-transition: 1s cubic-bezier(0.42, 0, 0.58, 1);transition: 1s cubic-bezier(0.42, 0, 0.58, 1);}
body.page-fade::after {opacity: 1;}
a{color:#000;text-decoration:none;-o-transition:var(--transition);-webkit-transition:var(--transition);-moz-transition:var(--transition);transition:var(--transition)}
a:hover{color:#777;}
*{ backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;}
img{
    image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
    image-rendering: crisp-edges;
    max-width:100%;
    width: 100%;
}
figure{margin-bottom:0}
p:last-child{margin-bottom:0}
:root{
    --mainColor:#0A5596;
    --subColor: #00a0e6;
	--darkColor: #1f3c6c;
    --gray:#DCDCDC;
    --black: #1b1c1d;
    --spacing-all: clamp(2rem,5vw,4rem);
    --transition:all .3s linear;
	--transition-long:all 1s ease-out;
	
	/* 裝飾線 */
	--line_size: 1px;
	--line_dot: calc(100% - var(--line_size));
	--line_dot-x-star:75%;
	--line_dot-x-star-end:90%;
	--clip_num: 1rem;
    --clip: calc(100% - var(--clip_num));
}
/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alertLine{border-color: #d40023;}
.red{color: #d40023;}

/* 回頂端 */
#goTop{display:none;cursor:pointer;position:fixed;z-index: 9;bottom:1rem;right:1rem;width:50px;height:50px;line-height:50px;text-align:center;color:#ccc;background:#fff;border:solid 1px #ccc;border-radius:100%;box-shadow:rgba(0,0,0,.5) 0 0 5px}
#goTop:hover{background:#999;color:#FFF}

/*按鈕*/
.btnWrap {margin: 2em 0 0;}
.circleBtnStyle{display:flex;align-items: center;color: var(--gray);letter-spacing: .15em;font-size: 1rem;}
.circleBtnStyle__pic{position: relative;display: flex;align-items: center;justify-content: center;width: 100px;aspect-ratio: 1/1;padding: 5%;border-radius:100%;transition: var(--transition);font-size: 1.15rem;}
.circleBtnStyle__pic::before{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 100%;border: solid 2px var(--gray);clip-path: polygon(0% 0%, 100% 0%,100% 20%,50% 20%,50% 80%,100% 80%,100% 100%,0% 100%);transition: var(--transition);}
.circleBtnStyle__pic img{max-width: 100%;max-height: 100%;}
.circleBtnStyle__txt{--pd: 3rem;position: relative;display:flex;align-items:center;padding: 0 calc(var(--pd) + 1rem) 0 0;transition: var(--transition);font-size: .9rem;}
.circleBtnStyle__txt::before{content:'';position: absolute;right: 0;top: 50%;display: inline-block;width: var(--pd);height: 1px;background: var(--gray);transition: var(--transition);}

.circleBtnStyle:hover{color: var(--gray);}
.circleBtnStyle:hover .circleBtnStyle__pic{box-shadow: -.5rem 0 1rem -.25rem rgb(158 214 224);/* background: #e5fbff96; */}
.circleBtnStyle:hover .circleBtnStyle__pic::before{clip-path: polygon(0% 0%, 100% 0%,100% 40%,50% 40%,50% 60%,100% 60%,100% 100%,0% 100%);}
.circleBtnStyle:hover .circleBtnStyle__txt{padding-left: calc(var(--pd) + 1rem);}
.circleBtnStyle:hover .circleBtnStyle__txt::before{left: 0;width: var(--pd);}


.btnWrap { text-align: center; padding-top: 4rem }
.btnStyle {/* font-style: italic; *//* font-weight: 400; */display: inline-block;/* min-width: 130px; */padding: 1px;letter-spacing: .25em;font-size: 1rem;/* -webkit-transform: skew(-5deg); *//* transform: skew(-5deg); */}
.btnStyle+.btnStyle { margin-left: .5rem }
.btnStyle span {display: block;padding: .5rem 1.5rem;position: relative;transition: var(--transition);background: rgba(255,255,255,.5);}
.btnStyle span:before,.btnStyle span:after{position: absolute;content: "";transition: var(--transition);}
.btnStyle span:before {content:'';position:absolute;right: 0;bottom: 0;width:1rem;aspect-ratio:1;background:var(--mainColor);clip-path: polygon(100% 0,100% 100%,0 100%);}
.btnStyle span:after { width: calc(100% - 3px); height: calc(100% - 3px); top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: -1; opacity: .8 }
.btnStyle:hover { -webkit-animation: btnMove .6s linear forwards; animation: btnMove .6s linear forwards }
@media all and (max-width: 640px) { .btnStyle span { display:block; padding: .5rem 1.5rem .5rem 1.75rem } }
.btnStyle--dark {background: linear-gradient(135deg,rgba(0,0,0,.5) 2%,rgba(0,0,0,0) 37%,rgba(0,0,0,.5) 100%);-webkit-box-shadow: 0 0 30px rgba(0,0,0,.1);box-shadow: 0 0 30px rgba(0,0,0,.1);background-size: 200% 200%;}
.btnStyle--dark span:after { background: #fff }
.btnStyle--dark:hover { color: #000 }
.btnStyle--white { background: linear-gradient(93deg,rgba(255,255,255,.7) 2%,rgba(255,255,255,.1) 37%,rgba(255,255,255,.7) 100%); -webkit-box-shadow: 0 0 30px rgba(255,255,255,.45); box-shadow: 0 0 30px rgba(255,255,255,.45); background-size: 140% 140% }
.btnStyle--white span { color: #fff }
.btnStyle--white span:after { background: #000 }
@-webkit-keyframes btnMove { 
	0% { background-position: 0 50% } 
	50% { background-position: -150% 50% } 
	100% { background-position: 80% 50% } 
}
@keyframes btnMove {
	0% { background-position: 0 50% } 
	50% { background-position: -150% 50% } 
	100% { background-position: 80% 50% } 
}

@media screen and (max-width: 640px) {
#goTop{width:100%;left:0;right:0;bottom:0;border-radius:0;border:0;border-top:1px solid #eee}
}

/*RWD編輯器表格(X捲軸)*/
.table-container table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}
@media screen and (max-width: 768px) {
	.table-container{width:100%;overflow-x: scroll;overflow-y:auto;_overflow:auto;margin:0 0 1em}
}
/*IE瀏覽器*/
.warning{width:100%;color:#fff;text-align: center;max-width: 1500px;padding: 60px 50px 50px;position:fixed;left:50%;transform: translate(-50%, -50%);top: 50%;background-color: #283d86;box-shadow:0 0 15px rgba(51,51,51,.5);border-radius:3px;z-index:9999999999;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;}
.off{cursor: pointer;position:absolute;right: 10px;top: 10px;border: 1px solid #eee;padding: 3px 5px 3px 10px;}
.off:hover{background-color:#fff;color:#333;}

.useTool p{font-size: 25px;font-weight: 600;margin-bottom: 30px;}
.useTool ul{padding-left:0;list-style:none}
.useTool li{display:inline-block;margin: 0 5px;}
.useTool a{display:block;background: #fff;padding: 7px 10px;border-radius: 60px;}
.useTool b{margin-bottom: 10px;display: block;text-align: center;}
.useTool figure{width: 30px;float:left;margin-right: 5px;margin-bottom: 0;}
.useTool span{float:right;margin-top: 2px;font-weight: 600;}
/* submit-loading */
.load-wrapp{position:fixed;width:100%;height:100%;background: rgb(0 0 0 / 65%);top: 0;left: 0;z-index: 99999;}
.loading{position:absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
.loading span{color:#fff;font-size: 25px;margin-top: 40px;display: table;}
.spinner {position: relative;width: 60px;height: 60px;margin: 0 auto;}
.bubble-1,.bubble-2 {position: absolute;top: 0;width: 30px;height: 30px;border-radius: 100%;background-color: #fff;}
.bubble-2 {top: auto;bottom: 0;}
.loading .spinner {animation: loadingI 2s linear infinite;}
.loading .bubble-1,.loading .bubble-2 {-webkit-animation: bubble 2s ease-in-out infinite;animation: bubble 2s ease-in-out infinite;-moz-animation:bubble 2s ease-in-out infinite;-o-animation:bubble 2s ease-in-out infinite;}
.loading .bubble-2 { animation-delay: -1s;}
/* animation:loadingI */
@-o-keyframes loadingI{100%{transform:rotate(360deg)}}
@-moz-keyframes loadingI{100%{transform:rotate(360deg)}}
@-webkit-keyframes loadingI{100%{transform:rotate(360deg)}}
@keyframes loadingI{100%{transform:rotate(360deg)}}
/* bubble */
@-o-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@-moz-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@-webkit-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
/* submit-loading END*/
/*---------------------- 頁面開始 ----------------------*/

/*全頁佈局*/
.wrapper { padding:2rem 0;}
.blockHeight{padding-top: var(--spacing-all);padding-bottom: var(--spacing-all);}
.blockHeight--sm{padding-top: 4rem;padding-bottom: 4rem;}

/*提醒:編輯器插入的圖需做以下設定，圖才不會變形*/
.tx01 img{max-width: 100%;height: auto!important;}

/* 標題 */
.bigTitle{}
.bigTitle::before{}
.bigTitle::after{}
.mainTitle{position:relative;display: flex;align-items: flex-end;gap:1rem;margin-bottom: 1rem;padding: 0 .5rem 1rem;font-size: 2rem;color: var(--mainColor);font-weight: 700;}
.mainTitle::before{content:'';position:absolute;left: 0;top: 0;width:1rem;aspect-ratio:1;background:var(--mainColor);clip-path:polygon(0 0,100% 0,0 100%);transform: translate(-50%,-50%);}
.mainTitle::after{
	content:'';
	pointer-events: none;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height: .5rem;
	background: linear-gradient(to left, #0a5596 0%, #0a5596 100%);
	/* clip-path: polygon(0 var(--line_dot),var(--line_dot-x-star) var(--line_dot),calc(var(--line_dot-x-star) + var(--clip_num)) 0,100% 0,100% var(--line_size),
    100% 100%,0 100%); */
	clip-path: polygon(0 var(--line_dot),var(--line_dot-x-star) var(--line_dot),calc(var(--line_dot-x-star) + var(--clip_num)) 0,100% 0,100% var(--line_size),    calc(var(--line_dot-x-star-end) + var(--clip_num)) var(--line_size),var(--line_dot-x-star-end) 100%,0 100%);
	transition:var(--transition)
}
.mainTitle__mj{}
.mainTitle__txt{display: flex;flex-direction: column;font-size:25%;}
.mainTitle__txt .box{}
.mainTitle--big{font-size: clamp(3rem,5vw,6rem);}
.titleGroup{margin-bottom: 2rem;}
.titleGroup__summary{font-size: 1.115rem;font-weight: 400;color: #666;}
.titleGroup__summary::before{}

.subTitle{position: relative;margin-bottom: 2rem;padding-left: 1rem;font-size:1.5rem;border-left: solid .25rem var(--mainColor);}
/* .subTitle::after{content:'';position:absolute;left: 0;bottom: -.5rem;width: 100%;height: .5rem;background: var(--mainColor);clip-path: polygon(0 0,var(--clip_num) var(--line_dot),100% var(--line_dot),100% 100%,var(--clip_num) 100%,0 var(--line_size));clip-path: polygon(0 0,var(--clip_num) var(--line_dot),100% var(--line_dot),100% 100%,var(--clip_num) 100%,0 100%);} */

/* 文字動態 */
.animated:not(.banner) .splitting .char {
	-webkit-animation: vague-in 1000ms calc(75ms * var(--char-index)) cubic-bezier(0.5, 0, 0.5, 1) both;
			animation: vague-in 1000ms calc(75ms * var(--char-index)) cubic-bezier(0.5, 0, 0.5, 1) both;
}
.animated.banner .slick-current .splitting .char{
	-webkit-animation: vague-in 1500ms calc(150ms * var(--char-index)) cubic-bezier(0.5, 0, 0.5, 1) both;
			animation: vague-in 1500ms calc(150ms * var(--char-index)) cubic-bezier(0.5, 0, 0.5, 1) both;
 }
/* splitting 文字動畫效果 */
@-webkit-keyframes slide-in {
	0% {
	  -webkit-transform: translateY(100%) scale(0.5);
			  transform: translateY(100%) scale(0.5);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateY(0) scale(1);
			  transform: translateY(0) scale(1);
	  opacity: 1;
	}
  }
  @keyframes slide-in {
	0% {
	  -webkit-transform: translateY(100%) scale(0.5);
			  transform: translateY(100%) scale(0.5);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateY(0) scale(1);
			  transform: translateY(0) scale(1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes vague-in {
	0% {
	  -webkit-transform: translateX(-100%);
			  transform: translateX(-100%);
	  -webkit-filter: blur(1em);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	  -webkit-filter: blur(0);
	  opacity: 1;
	}
  }
  @keyframes vague-in {
	0% {
	  -webkit-transform: translateX(-100%);
			  transform: translateX(-100%);
	  -webkit-filter: blur(1em);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateX(0);
			  transform: translateX(0);
	  -webkit-filter: blur(0);
	  opacity: 1;
	}
  }
  

/*banner*/
.banner{}
.banner__box{position:relative}
.bannerTitle{margin:0;position:absolute;left:50%;bottom:50px;transform:translateX(-50%);color:#fff}
.pgBanner{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 10rem 4rem;min-height: clamp(10rem,40vw,70vh);color: #fff;text-align: center;/* text-shadow: 0 0 1rem rgba(0,0,0,.5); */}
.pgBanner__mjBox{
	--size:.75em;
	--x: clamp(2rem, 5vw, 5rem);
	--y: calc(100% - var(--size));
	--pd-x: clamp(2rem, 5vw, 5rem);
	/* --pd-x: 5rem; */
	position: relative;
	padding: 1rem var(--pd-x);
	font-size: clamp(2rem,5vw,3rem);
	background: linear-gradient(135deg, rgb(13 76 157) 0%, rgb(22 36 125) 50%, rgb(14 73 153) 100%);
	clip-path: polygon(0 0, 100% 0, 100% var(--y), calc(100% - var(--x)) var(--y),calc(100% - var(--x) - var(--size)) 100%,calc(var(--x) + var(--size)) 100%,var(--x) var(--y),0 var(--y));
	color: var(--gray);
	text-align: center;
}
.pgBanner__mjBox::before,.pgBanner__mjBox::after{content:'';position:absolute;}
.pgBanner__mjBox::before{top: .25em;left:.5rem;right: .5rem;height: calc(100% - var(--size) - .5em);border-left: .3rem solid var(--gray);border-right: .3rem solid var(--gray);}
.pgBanner__mjBox::after{right:.5rem}
.pgBanner__mjBox .mj{position: relative;font-size: clamp(1.5rem, 5vw, 3rem);}
.pgBanner__mjBox .mj::before{
	content:'';
	position:absolute;
	top:50%;
	left: calc(-1 * var(--pd-x) + .5rem);
	right: calc(-1 * var(--pd-x) + .5rem);
	height: 2px;
	background:var(--gray);
	clip-path: polygon(0 0 , calc(var(--pd-x) - 1rem) 0, calc(var(--pd-x) - 1rem) 100%, calc(100% - var(--pd-x) + 1rem) 100%, calc(100% - var(--pd-x) + 1rem) 0%,  100% 0, 100% 100% ,0% 100%);
}
.pgBanner__mjBox .txt{font-size: clamp(1rem, 4vw, 1.5rem);}
.pgBanner__subBox{font-family: "Noto Serif TC", serif;font-weight: 500;font-size: clamp(2rem,5vw,3rem);text-shadow: 0 0 1rem rgba(0, 0, 0, .5),0 0 .25rem rgba(0, 0, 0, .5);text-align: center;}
.pgBanner__subBox.blue{color:var(--mainColor);text-shadow:none}
.titleBlock{margin-bottom:2rem}
/*! header*/
.navbar{
    --bs-navbar-nav-link-padding-x: clamp(1.5rem,5vw,3rem);
    margin: .5rem 1rem;
    padding: 0;
    background: linear-gradient(135deg, rgb(255 255 255 / 0%) 0%, rgba(255, 255, 255, 0) 100%);
    /* border-bottom: solid 1px rgb(255 255 255 / 50%); */
    clip-path: polygon(0% var(--clip_num),var(--clip_num) 0%, 100% 0%, 100% var(--clip),var(--clip) 100%,0% 100%);
	transition:var(--transition)
}
.navbar .container-fluid{display:flex;justify-content: space-between;padding: 0;}
.logo{margin-bottom: 0;display: inline-flex;}
.logo__pic{aspect-ratio: 200/20;height: 1.5rem;object-position: center bottom;object-fit: cover;aspect-ratio: 289 / 150;height: 6rem;transition: var(--transition);}
.navbar-brand{display: inline-flex;align-items: center;/* margin-right: clamp(1.5rem,2.5vw,2.5rem); *//* margin-left: 1rem; */padding: 1rem;transition: var(--transition);}
.menuBar--wrapper{position:relative;display: flex;justify-content: space-between;}
.menuBar--wrapper::after{
	content:'';
	pointer-events: none;
	position:absolute;
	z-index: 3;
	right: 0;
	bottom:0;
	width: 100%;
	height: .5rem;
	background: linear-gradient(to left, rgb(255 255 255) 40%, rgb(255 255 255 / 0%) 100%);
	clip-path:
		polygon(0 var(--line_dot),var(--line_dot-x-star) var(--line_dot),calc(var(--line_dot-x-star) + var(--clip_num)) 0,100% 0,100% var(--line_size),
				calc(var(--line_dot-x-star-end) + var(--clip_num)) var(--line_size),var(--line_dot-x-star-end) 100%,0 100%);
	transition:var(--transition)
}
.menuBar{}
.nav-link{position: relative;z-index: 1;display: block;font-size: 1.15rem;color: #fff;line-height: 1.5;font-weight: 300;padding: 2rem 3rem;transition: var(--transition);}
.nav-link::after{content:'';position:absolute;z-index:-1;bottom: 0;right:0;width:0;height:100%;background: var(--black);transition:var(--transition)}
.nav-link.active{color: #fff!important;}
.nav-link.active::after{left:0;width:100%;height: .45rem;background: var(--subColor);/* border-radius: 3em; */}
.nav-link:hover{color:#fff}
.nav-link:hover::after{left:0;width:100%;}
.dropdown-toggle::after{content: none;}
.dropdown-item{padding: .75rem 1.5rem;}

.navbar--fixed.navbar{border-top: 0.25rem solid var(--mainColor);background: linear-gradient(135deg, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 50%) 100%);}
.navbar--fixed .menuBar--wrapper::after{opacity:0}
.navbar--fixed .logo__pic{aspect-ratio: 289/150;height: 5rem;aspect-ratio: 200 / 20;height: 1.5rem;}
.navbar--fixed .menuBar{background: linear-gradient(135deg, rgb(46 53 58) 0%, rgb(46 53 58 / 25%) 100%);background: linear-gradient(135deg, rgb(31 60 108) 0%, rgb(127 142 159 / 50%) 100%);}
.navbar--fixed .nav-link{padding: 1rem;}

.navbar--fixed .nav-item:nth-child(3n) .nav-link{background: linear-gradient(135deg, rgb(46 53 58) 0%, rgb(46 53 58 / 25%) 100%);}
.navbar--fixed .nav-item:nth-child(3n-1) .nav-link{background: rgb(31 60 108);}
.navbar--fixed .nav-item:nth-child(1) .nav-link{background: transparent;}

/*-header-手機按鈕*/
.navbar-toggler{border:none;display: flex;flex-direction: column;gap: 0.375rem;aspect-ratio: 3/2;object-fit: cover;object-position: center;justify-content: center;padding: 0.5rem;}
.navbar-toggler:focus{box-shadow: none;}
.navbar-toggler__line{width: 1.5rem;height: 2px;background: var(--mainColor);display: inline-block;border-radius: 100rem;transition: 0.3s all;}
.navbar-toggler.open .navbar-toggler__line:nth-child(1){transform:translateY(0.5rem) rotate(225deg);}
.navbar-toggler.open .navbar-toggler__line:nth-child(2){transform:translateX(0.5rem);opacity:0;}
.navbar-toggler.open .navbar-toggler__line:nth-child(3){transform:translateY(-0.5rem) rotate(-225deg);}


/* 首頁 */
.indexPage{/* font-size:20px; *//* line-height:1.5; *//* font-weight:400; *//* background: radial-gradient(100% 58.8% at 0% 100%, #cee8ff 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(100% 46.38% at 100% 41.74%, #a1d3ff 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(145deg, #cfdbe6 0%, #96ceff 15%, #ffffff 55%, #ffffff 100%); */background-attachment:fixed;overflow-x: hidden;}

/* KV區 */
.indexKV{--chip-height:100vh;--chip-width:100vw;z-index: 2;position:relative;width:100%;height:275vh;min-height:2000px;}
.indexKV__container{position:sticky;top:0;width:100%;height:100vh}
.indexKVArticle{position:absolute;z-index:2;left:0;bottom:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap: 1rem;padding:8rem 0;text-align:center;color: #fff;text-shadow: 0 0 1rem rgba(0,0,0,.5);}
.indexKVArticle .focus{font-weight:700}
.indexKVArticle .sub{display: flex;align-items: center;gap: clamp(1rem,6vw,2rem);margin: 0;font-size: clamp(1.25rem,3vw,2rem);font-weight: 400;letter-spacing: clamp(.15em,1vw,.5em);}
.indexKVArticle .sub::before,.indexKVArticle .sub::after{content:'';display:block;width: 5vw;height: 1px;background:#fff;}
.indexKVArticle .tt{margin: 0;font-size:clamp(1.5rem,5vw,10rem);font-weight: 700;letter-spacing: .115em;}
.indexKVArticle .txt{margin: 0;padding: 0 .5rem 0 calc(.5rem + .5em);font-size: clamp(1rem,3vw,1.5rem);font-weight: 200;letter-spacing: .5em;color: #fff;text-shadow: 0 0 .25rem rgba(0, 0, 0, .5);/* background: linear-gradient(135deg, rgb(32 64 130) 0%, rgba(64, 150, 238, 1) 100%); */border: solid 1px #fff;}

.aboutMaskContainer{position:relative;width:100%;height:100%;/* overflow:hidden; */}
.indexKVBg,.indexKVBg::after{transform-origin:right center}
.indexKVBg{width:100%;height:100%;background-image:url(../images/index/kv_bg.png?20240807);background-size: 100%;background-repeat: no-repeat;animation: kvbg 5s ease-out  infinite;transform-origin: right bottom;}
.indexKVBg::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background: #93acc05e;/* z-index:2; */}
.indexKVBg::after{content:'';position:absolute;/* right:5%; *//* bottom:2%; */width: 15%;aspect-ratio: 1166/471;background: url('../images/index/kv_car.png') no-repeat center/contain;animation: kvcar 3s ease-in-out  infinite;}
.maskText{position:absolute;z-index:3;top:50%;left:50%;overflow:initial;width:var(--chip-width);transform:translate(-50%,-50%);opacity:0;}
@keyframes kvbg {
	0% {
		/* background-size:100%; */
		/* background-position:50%; */
		transform:translateX(0) scale(1);
	}
	100% {
	    /* background-size:105%; */
		/* background-position:100%; */
		transform:translateX(0%) scale(1.2);
	}
}
@keyframes kvcar {
	0% {
		transform:translateX(0) scale(.5);
		right:-20%;
		bottom:40%;
		opacity:1;
		filter:blur(3em)
	}
	30%{
		filter:blur(0)
	}
	90% {
		transform:translateX(0%) scale(3);
		right:40%;
		bottom:-5%;
		opacity:1;
		
	}
	100%{
		right:50%;
		bottom:-5%;
		transform:translateX(0%) scale(3);
		opacity:0;
	}
}

.blockHeight--ixBox1{/* padding: 0; */}
.ixBox1{--ftL: 30%;--box-margin: 4rem;position: relative;z-index: 1;display: flex;flex-wrap: wrap;align-items: center;/* gap: 2rem; */padding: calc(var(--spacing-all) * 2) var(--spacing-all);justify-content: flex-end;}
.ixBox1::before{content: '';position: absolute;top: 0;left: 0;width: var(--ftL);height: 100%;background: linear-gradient(135deg, rgb(46 53 58) 0%, rgb(46 53 58 / 25%) 100%),url('../images/index/bg.png') center/cover;clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);z-index: 0;}
.ixBox1__box .slogan{font-size: 3.25vw;color:#fff;font-weight: 900;line-height: 1.2;transform: translateY(-50%);opacity: .45;}
.slogan__mj{display: block;}
.slogan__line{color: rgb(255 255 255 / 5%);-webkit-text-stroke: .5px #ffffff;}
.ixBox1__box{position: relative;z-index: 1;}
.ixBox1__box--top{
    width: calc(var(--ftL) - var(--spacing-all));
    margin-right: auto;
}
.ixBox1__box--top .infoBox{}

.ixBox1__box--bottom{width: calc(100% - var(--ftL));padding: 0 var(--box-margin);/* margin-left: calc((-1 * var(--box-margin)) / 2); *//* margin-right: var(--box-margin); */}
.pdCardList{display: grid;grid-template-columns: repeat(2,1fr);gap: var(--box-margin);justify-content: flex-end;}
.pdCard{--removing: 3rem;}
.pdCard .infoBox{position: relative;display: flex;flex-direction: column;align-items: flex-start;gap: 1rem;padding: 1rem 0 0 var(--removing);font-size: 1.115rem;}
.pdCard .infoBox::before{content:'';position:absolute;left: calc(var(--removing) / 2);top: calc(-1 * var(--removing));bottom:0;width:1px;background: #ffffff;background: linear-gradient(to bottom, rgb(255 255 255 / 30%) 0%, rgb(255 255 255) var(--removing), rgb(46 53 58) var(--removing), rgb(46 53 58 / 25%) 100%);}
.pdCard .infoBox__tt{position: absolute;bottom: 100%;left: var(--removing);margin: 0 0 1rem;color: #ffffff;font-size: 2.25rem;font-weight: 500;/* transform: translateY(calc(-100% - 1rem)); */}
.pdCard .picBox{position: relative;/* max-width: 450px; */display:block}
.pdCard .picBox::after{content:'';position:absolute;z-index: 1;left:0;right:0;bottom:0;height: 100%;background: linear-gradient(to top, rgb(38 39 40 / 80%) 0%, rgb(57 60 62 / 0%) 100%);}

/* ul樣式 */
.ulList{margin-bottom:0;}
.ulList>li::marker{}

/* 科技樣式 */
.picBox--frame{
	--clip_num: 2.5rem;
	--clip: calc(100% - var(--clip_num));
	clip-path: polygon(0% var(--clip_num), var(--clip_num) 0%, 100% 0%, 100% var(--clip), var(--clip) 100%, 0% 100%);
}
.picBox--frame .frame{aspect-ratio: 6/4;object-fit: cover;/* clip-path: polygon(0% var(--clip_num), var(--clip_num) 0%, 100% 0%, 100% var(--clip), var(--clip) 100%, 0% 100%); */}

/* footer */
.footer{--ftL: 30%;display: flex;flex-wrap: wrap;background: var(--mainColor);color:#fff;font-weight:300;font-size: 1rem;}
.footer a{color:#fff;}
.footer__head{width: var(--ftL);padding: 4rem;/* background: #1b1c1d; */}
.footer__head__tt{margin-bottom: 0;font-size: clamp(1rem,3vw,1.25rem);letter-spacing: .65em;}
.footer__head .logo__pic{aspect-ratio: 289/150;height: 5rem;aspect-ratio: 200 / 20;height: 2rem;filter: brightness(10);}
.ftInfo{list-style-type:none;margin:0;padding:0;display: flex;flex-direction: column;gap: .25rem;text-align: left;}
.ftInfo__box{display:flex;align-items:center;}
.ftInfo__box__tt{font-weight: 400;margin-right:1rem}
.ftInfo__box__txt{flex: 1;}
.footer__box{flex: 1;display: flex;justify-content: space-between;align-items: flex-start;padding: 4rem;background: rgba(0, 0, 0, .25);}
.ftNav{display:flex;gap: 1rem;}
.ftNav__link{position: relative;display:inline-block;padding: 0 1rem .75rem;font-size: 1.25rem;font-weight: 400;}
.ftNav__link::after{content:'';position:absolute;left:50%;top:100%;width: 6px;aspect-ratio:1;background: rgb(82 122 155);border-radius:100%;transform:translate(-50%,0)}
.footer__copyright{width: 100%;padding: 1rem 0;text-align: center;font-size: .9rem;font-weight: 200;background: rgba(0,0,0,.5);color: rgba(255,255,255,.5);}
.footer__copyright a{color: rgba(255,255,255,.5);}

/* 產品單元 */
.productKV{position: relative;z-index: 1;min-height: 100vh;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 4rem;padding: 128px 4rem 4rem;background: url('../images/products/mainPic.png');}
.productKV--night{background: url('../images/products/mainPic-night.png');}
.productKV::after{content: '';position: absolute;z-index: -1;top: 0;right: 0;width: 50%;height: 100%;background: var(--bgcolor);opacity: calc(100% - var(--mask));clip-path: polygon(0 100%,50% 0,100% 0%,100% 100%);}
.productKV__box{padding: 4rem;color: #fff;min-width: 30%;}
.productKV__box__tt{position: relative;display: inline-block;margin-bottom:0;padding-right: 1rem;font-size: clamp(2rem, 10vw, 8rem);}
.productKV__box__tt:before {content:'';position:absolute;z-index: -1;right: 0;bottom: 0;width: 1.5rem;aspect-ratio:1;background:var(--mainColor);clip-path: polygon(100% 0,100% 100%,0 100%);}
.productKV__box__subtt{font-size: clamp(1.25rem,8vw,3rem);line-height:1.2;opacity: .5;text-transform: uppercase;/* font-style: italic; */font-weight: 100;margin-bottom: 0;}
.productKV__box__txt{font-size: clamp(1.25rem, 6vw, 1.5rem);margin-bottom: 1rem;letter-spacing: .25em;}
.capabilityData{display:flex;flex-direction:column;gap:1rem;list-style-type:none;margin:0;padding:0}
.capabilityData__box{/* display:grid; *//* grid-template-columns: 140px 1fr 80px; */align-items:center;gap: clamp(.5rem,2vw,1rem);display: flex;flex-wrap: wrap;}
.capabilityName{display: block;padding: .25rem .75rem;background: var(--mainColor);text-align: center;border-radius: 3em;font-size: 1rem;}
.capabilityNum{flex: 1;position: relative;height: .5rem;border-radius:1em;background: #ccc;/* overflow: hidden; */}
.capabilityNum::after{content:'';position:absolute;z-index: 1;left:0;top: 50%;width:0;height: 100%;background:var(--subColor);background-image: linear-gradient(to left, #209cff 0%, #68e0cf 100%);border-radius: 3em;transform: translateY(-50%);transition:var(--transition-long);transition-delay: calc(.25s * var(--i));}
.capabilityTxt{font-size: clamp(1rem,6vw,2rem);font-weight: 100;line-height: 1;}
.capabilityTxt small{font-size:60%;margin-left:.25rem}
.capabilityData__box.animated .capabilityNum::after{width:var(--num)}
.productKV__other{display: inline-block;margin-top: auto;color: #fff;font-size: 2rem;}

/* 關於我們 */
.aboutVideo{margin-top: -10rem;}
video{aspect-ratio: 16/9;width: 100%;}
.blockHeight--aboutBlock1{}
.aboutWrap{display: flex;align-items: center;flex-wrap: wrap;}

.aboutWrap__box{width: 50%;/* padding: 2rem; */}
.aboutWrap__box--pic{margin-bottom:1rem}
.aboutWrap__box--pic figcaption{font-size:1rem;padding: .5rem 1rem;}
.aboutWrap__box--info{padding: 2rem 0 2rem 2rem;}
.aboutWrap__box .infoBox{/* font-size: 1.25rem; */padding-right: 1rem;}
.aboutWrap:nth-child(even){flex-direction: row-reverse;}
.aboutWrap:nth-child(even) .aboutWrap__box--info{}

.blockHeight--aboutBlock2{}
.aboutBlock2{display: grid;grid-template-columns: repeat(2,1fr);gap:2rem}
.aboutCard{position:relative;display: flex;flex-direction: column;text-align: center;/* border: solid 1px var(--darkColor); */box-shadow: 0 .25rem 1rem rgba(0,0,0,.1);}
.aboutCard::before{content:'';position:absolute;z-index: -1;right: -.45rem;bottom: -.45rem;width: 4rem;aspect-ratio:1;background: var(--darkColor);clip-path: polygon(100% 0,100% 100%,0 100%);/* transform: translate(-50%,-50%); */}
.aboutCard__head{padding: 1rem;background: var(--darkColor);color: #fff;font-size: 1.5rem;}
.aboutCard__body{padding: 1rem;font-size: 1.25rem;background: #fff;}
.picRow{display: grid;grid-template-columns: repeat(2,1fr);gap:2rem}

.albumList{display: grid;grid-template-columns: repeat(4,1fr);gap:2rem}
.albumList__box{}
.albumList__box img{width:100%;height:100%;object-fit:cover}

.aboutTab{display: flex;gap:clamp(0.5rem,1.3vw,1rem);justify-content: center;padding:clamp(0.5rem,2.8vw,2.5rem);}
.aboutTab__item{padding:0.5rem 1rem;border-radius: 2rem;background: var(--mainColor);color:#fff;text-align: center;width:min(100%,10rem);font-size: clamp(1rem,1.5vw,1.25rem);}
.aboutTab__item:hover{color:#fff;background: var(--black);}
/* .titleBlock--mini{width:min(100%,37.5rem);margin:0 auto;} */
.IntroAlbumList{--spaceH:clamp(2rem,5vw,4rem); display: grid;grid-template-columns: 1fr 1.68fr;align-items: flex-start;padding-bottom:var(--spaceH);border-bottom: 1px solid #ccc;gap:0.5rem}
/* .Intro-minSize{display: grid;grid-template-rows: 1fr 1fr;gap: 1.125rem;} */
.Intro-minSizeX{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 0.5rem;margin-top: 0.5rem;}
.blockHeight--pd0{padding-bottom: 0;}
.DealerBox{--num: 2;--gap:2rem;display:flex;gap: var(--gap) ;flex-wrap: wrap;}
.DealerItem{width:calc((100% - var(--gap) * (var(--num) - 1)) / var(--num) );border-bottom: 1px solid #ccc;padding:2rem 0}
.DealerItem ul{padding-left: 0;}
.DealerItem__map{aspect-ratio: 2 / 1;}
.DealerItem__tit{margin-bottom: 1.25rem;}
.DealerItem__li{list-style: none;position: relative;font-size: clamp(1.125rem,1.3vw,1.25rem);}
.DealerItem__li[class*="icon--"]:before{display: inline-block; font-family: bootstrap-icons !important;font-size: 0.875em;width: 1.5rem; text-align: center;z-index: 2;line-height: 2.4;color:var(--mainColor);margin-right: 0.5rem;}
.icon--address:before{content: '\F3E7';}
.icon--phone:before{content: '\F5B4';}
.subTitle_2{text-align: center;font-size: clamp(1.375rem, 2.1vw, 1.875rem);color: var(--darkColor);margin:clamp(1.25rem,1.5vw,1.5rem)}

@media (max-width: 991px) { 
	/*! 991==header*/
	.navbar .container-fluid{flex-direction:column;background: #fff;}
	.menuBar--wrapper{width:100%}
	.menuBar{flex:1;    background: linear-gradient(135deg, rgb(31 60 108) 0%, rgb(127 142 159 / 50%) 100%);}
	.navbar-nav{display:flex;flex-direction: row;width: 100%;}
	.nav-item{flex:1;text-align: center;}
	.nav-link{padding: .5rem 0!important;}
	
	/* !991==KV區 */
	.indexKVBg{background: url('../images/index/kv_bg-mb.png')no-repeat center/cover;}
	.indexKVArticle{font-size:1rem;padding: 0 1rem;}



	/* !991==footer */
	.footer{--ftL: 100%;text-align:center}
	.footer__head{padding: 2rem;}
	.footer__box{width:100%;padding: 2rem;flex-direction: column;gap: 2rem;}
	.ftInfo{order:1}
	.ftNav{gap:2rem;width: 100%;justify-content: space-between;border-bottom: solid 1px rgb(255 255 255 / 30%);}
	.ftNav__link{padding:0 0 1rem;font-size:1.25rem;}
	.ftNav__link::after{transform: translate(-50%, -50%);}
	.footer__copyright{padding:1rem 1rem 4rem}

	/* !991==產品單元 */
	.productKV{padding: 16rem 2rem 4rem;}
	.productKV__box{padding: 0;width:100%}

	/* !991==banner */
	.pgBanner{padding: 16rem 2rem 14rem;}

	/* !991==標題 */
	.mainTitle{flex-direction:column;align-items: flex-start;}
	.mainTitle__txt{font-size:1.5rem}
	
	/* !991==首頁 */
	.ixBox1{--box-margin: 2rem}
	.pdCard{--removing:2rem;}

	/* !991==關於我們 */
	.albumList{grid-template-columns: repeat(3,1fr);gap:1rem}
}
@media (max-width: 768px) {
	/*! header*/
	.logo__pic{height:4rem}

	/* !768==KV區 */
	.indexKV{height: 90vh;min-height: inherit;}
	.indexKV__container{height:100%}
	.maskText{display: none;}
	
	/* !768==首頁 */
	.ixBox1{}
	.ixBox1__box{width: 100%;padding: 0;}
	.ixBox1__box--top{/* position: absolute; *//* left:0; *//* bottom:0; */margin: 2rem;order: 1;}
	.ixBox1__box--bottom{}
	.ixBox1__box .slogan{color:#ccc}
	.slogan__line{-webkit-text-stroke: .5px #999;}
	.ixBox1::before{width: 100%;height: 40vw;top: inherit;bottom: 0;}
	.ixBox1__box .slogan{font-size: 8vw;transform: translateY(0%);}
	.pdCardList{grid-template-columns: repeat(1,1fr)}	
}
@media (max-width: 640px) {

	/*! header*/
	.navbar{margin:0}
	.nav-link{font-size:.9rem}

	/* !640首頁 */
	.indexKVBg::after{width:25%}
	@keyframes kvcar {
		0% {
			transform:translateX(0) scale(.5);
			right:-20%;
			bottom:40%;
			opacity:1;
			filter:blur(3em)
		}
		30%{
			filter:blur(0)
		}
		90% {
			transform:translateX(0%) scale(3);
			right:5%;
			bottom:5%;
			opacity:1;
			
		}
		100%{
			right:50%;
			bottom:5%;
			transform:translateX(0%) scale(3);
			opacity:0;
		}
	}
	
	/* !640==關於我們 */
	.aboutVideo{margin-top: -10rem;}
	.aboutWrap{}
	.aboutWrap+.aboutWrap{margin-top:2rem}
	.aboutWrap__box{width: 100%;}
	.aboutWrap__box--info{padding:1rem}
	.aboutBlock2{grid-template-columns: repeat(1,1fr)}
	.picRow{grid-template-columns: repeat(1,1fr)}
	.albumList{grid-template-columns: repeat(2,1fr)}
	.DealerBox{--num: 1;--gap:1rem;}
	.IntroAlbumList{grid-template-columns:1fr}
	.Intro-miniSize{order:2}
	.Intro-Dm{order:1}
}