.TL  { 
	top: 10%; left: 5%;  
}
.TM  { 
	top: 10%; left: 50%;  transform: translateX(-50%); 
}
.TR  { 
	top: 10%; right: 5%;   
}
.ML  { 
	top: 50%; left: 5%; transform: translateY(-50%);  
}
.MM  { 
	top: 50%; left: 50%; transform: translate(-50%,-50%); 
}
.MR  { 
	top: 50%; right: 5%; transform: translateY(-50%); 
}
.BL  { 
	bottom: 10%; left: 5%; 
}
.BM  { 
	bottom: 10%; left: 50%; transform: translateX(-50%); 
}
.BR  { 
	bottom: 10%; right: 10%; 
}
.bannerBox {
	position: relative; 
	*height: 100% !important; 
	background-color: rgba(255, 255, 255,0); 
	margin: 0px; 
	padding: 0px;
	overflow: hidden;
}
.bannerBox .Img {
	position: relative; 
	margin: 0px; 
	padding: 0px; 
	border: 0px; 
	outline: 0px;  
	overflow: hidden;
	
}
.bannerBox .Txt {
	position: absolute; 
	color: rgb(255, 255, 255); 
	box-sizing: border-box; 
	z-index: 2; 
}
.bannerBox .title { 
	position: relative;
	padding: var(--banner_title_padding); 
	transition: background 3.5s 1.4s ;
	font-family: var(--d71); 
	line-height: 1.2; 
	font-size: 1rem; 
	word-spacing: 10px; 
	letter-spacing: 0.3rem; 
	display: inline-block; 
	opacity: 1; 
	margin: 0 ;
	max-width: auto;
	width: auto;
	white-space: nowrap; 
	
}
.bannerBox .title a:link {
	text-decoration: none ; color: inherit; 
}
.bannerBox .title a:visited {
	text-decoration: none ; color: inherit; 
}
.bannerBox .title a:hover {
	text-decoration: none ; color: inherit; 
}
.bannerBox .title img{
	margin-left: auto; 
	margin-right: auto; 
	max-width: 95%;
	*height: auto !important; 
	
}
.bannerBox .Spacs {
	font-size: 1.777rem; 
	opacity: 0;
}
.bannerBox .subTitle {
	font-size: 2.2rem; 
	font-weight: 1; 
	word-spacing: 10px; 
	letter-spacing: 0.2rem; 
	opacity: 0;
}
.bannerBox .title.small {
	font-size: 0.9rem;
}
.bannerBox .subTitle.small {
	font-size: 2rem;
}
.bannerBox .show .Spacs {
	transition:3.6s 1.2s; 
	opacity: 1;
}
.bannerBox .show .subTitle {
	transition:3.6s 1.4s; 
	opacity: 1; 	
}
.bannerBox img.image {
	*width: 100%; 
	display: block; 
	backface-visibility: hidden; 
	margin: 0px; 
	padding: 0px; 
	outline: 0px; 
	border: 0px currentColor; 	
}
.bannerBox ul {
	background: none; 
	margin: 0px; 
	padding: 0px; 
	outline: 0px; 
	border: 0px currentColor; 
	border-image: none; 
	font-size: 100%; 
	vertical-align: baseline;
}
.bannerBox ul li{
	background: none; 
	
	margin: 0px; 
	padding: 0px; 
	outline: 0px; 
	border: 0px currentColor; 
	border-image: none; 
	font-size: 100%; 
	vertical-align: baseline;
}
#banner li, #banner ul, #banner .img{
	*height: 100%; 
	overflow: hidden
}

.bannerFilter  { 
	*position: absolute; 
	*left: 0; 
	*top: 0%; 
	*height: 100%; 
	*width: 100%; 
	background: var(--bannerFilter);
}
.bannerBox .title div {
	opacity: 0; 
}
.bannerBox .show .title {
	background: var(--d73); 
}
.bannerBox .show .title div:nth-child(5n+1) {
	transition: all 3s; 
	transition-delay: .5s!important; 
	opacity: 1; 
}
.bannerBox .show .title div:nth-child(5n+2) {
	transition: 3s 1.4s; 
	transition-delay: 1.5s!important; 
	opacity: 1; 
}
.bannerBox .show .title div:nth-child(5n+3) {
	transition: 3s 1.4s; 
	transition-delay: 2.5s!important; 
	opacity: 1; 
}
.bannerBox .show .title div:nth-child(5n+4) {
	transition: 3s 1.4s; 
	transition-delay: 3.4s!important; 
	opacity: 1; 
}
.bannerBox .show .title div:nth-child(5n+5) {
	transition: 3s 1.4s; 
	transition-delay: 4.2s!important; 
	opacity: 1; 
}
.bannerBox .show .title div:nth-child(5n+6) {
	transition: 3s 1.4s; 
	transition-delay: 4.9s!important; 
	opacity: 1; 
}
.bannerBox .show .title.box-1 {
	animation: border-square-corner 3s 3s; 
	animation-fill-mode: forwards; 
}
.bannerBox .title.box-2 {
	position: relative;
	border: 1px solid rgba(255, 255, 255 , 0);
}
.bannerBox .title.box-2::before, .bannerBox .title.box-2::after {
	content: "";
	position: absolute;
	width: 20%; height: 20%; 
}
.bannerBox .title.box-2::before {
	top: -5px;
	left: -5px;
	border-top: 1px solid rgba(255, 255, 255, 0);
	border-left: 1px solid rgba(255, 255, 255, 0);
}
.bannerBox .title.box-2::after {
	bottom: -5px;
	right: -5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0);
	border-right: 1px solid rgba(255, 255, 255, 0);
}
.bannerBox .show .title.box-2::before, .bannerBox .show .title.box-2::after {
	animation: border-corner 2.5s 1s ; animation-fill-mode: forwards;
}
.bannerBox .show .title.box-2 {
	border: 1px solid rgba(255, 255, 255 , 0);
	animation: border-square 3.5s 3s ; animation-fill-mode: forwards;
}
.bannerBox .title.box-3 {
	position: relative;
	border: 2px solid rgba(255, 255, 255 , 0);
}
.bannerBox .title.box-3::before, .bannerBox .title.box-3::after {
	content: "";
	position: absolute;
	width: 20%; height: 20%;
}
.bannerBox .title.box-3::before {
	top: -5px;
	left: -5px;
	border-top: 1px solid rgba(255, 255, 255, 0);
	border-left: 1px solid rgba(255, 255, 255, 0);
}
.bannerBox .title.box-3::after {
	bottom: -5px;
	right: -5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0);
	border-right: 1px solid rgba(255, 255, 255, 0);
}
.bannerBox .show .title.box-3::before, .bannerBox .show .title.box-3::after {
	animation: border-corner-1 1.5s 1.3s ; animation-fill-mode: forwards;
}
.bannerBox .show .title.box-3 {
	animation: border-square-1 3s 1.3s ; animation-fill-mode: forwards;
}




.bannerBox .scroll-down {
	position: absolute;
	bottom: 15px;
	left: 50%;
	opacity: .8;
	padding: 0 10px;
	cursor: pointer;
	z-index: 3;
	transform: translate(-50%, 0);  
	color: white;
	animation: bounce1 .85s infinite alternate; 
	filter: drop-shadow(-2px -2px 2px rgba(0,0,0,.9)); 
}
.bannerBox .scroll-down img{
	filter: invert(100%);
}
.bannerBox .scroll-down:hover {
	opacity: 1;
	animation-play-state: paused;
}


@keyframes bgcolor {
	0% {
		width:0%; 
	}
	100% {
		width:100%; 
	}
}
@-webkit-keyframes bgcolor{
	0% {
		width:0%; 
	}
	100% {
		width:100%; 
	}
}
@keyframes bounce1 {
	from { transform: translate(-50%, 10px);}
	to { transform: translate(-50%, 0); }
}
@-webkit-keyframes bounce1{
	from { transform: translate(-50%, 10px);}
	to { transform: translate(-50%, -0); }
}






@keyframes border-square-corner {
	0% {
		border: 6px solid rgba(255,255,255,.0); 
	}
	100% {
		border: 6px solid rgba(255,255,255,.8);
	}
}
	
@keyframes border-corner {
	0% {
		width: calc(100% + 14px); height: calc(100% + 14px); border-color: rgba(255, 255, 255, 0.85)
	}
	35% {
		width: 40px; height: 40px; border-color: rgba(255, 255, 255, 0.85);
	}
	100% {
		width: 40px; height: 40px; border-color: rgba(255, 255, 255, 0);
	}
}
@keyframes border-square {
	0% {
		border: 1px solid rgba(255, 255, 255 , 0);
	}
	50% {
		border: 1px solid rgba(255, 255, 255 , 0.45);
	}
	100% {
		border: 1px solid rgba(255, 255, 255 , 0);
	}
}
@keyframes border-corner-1 {
	0% {
		width: calc(100% + 14px); height: calc(100% + 14px); 
	}
	50% {
		border-color: rgba(255, 255, 255, 0.85)
	}
	100% {
		width: 0%; height: 0%; border-color: rgba(255, 255, 255, 0);
	}
}
@keyframes border-square-1 {
	0% {
		border: 2px solid rgba(255, 255, 255 , 0);
	}
	100% {
		border-top: 1px solid rgba(255, 255, 255 , 0.85);
		border-bottom: 1px solid rgba(255, 255, 255 , 0.85);
		border-left: 1px solid rgba(255, 255, 255 , 0.5);
		border-right: 1px solid rgba(255, 255, 255 , 0.5);
	}
}	

@media all and (max-width:1024px)
{	
	.bannerBox .title {
		font-size: 0.91rem !important;
	}
}
@media (max-width: 767.98px) 
{
	.bannerBox .title {
		font-size: 0.85rem !important;
	}
	.bannerBox .scroll-down {
		display: none;
	}
}
@media (max-width: 575.98px) 
{
	.TL  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.TM  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.TR  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.ML  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.MM  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.MR  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.BL  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.BM  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.BR  { 
		left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;
	}
	.bannerBox  #banner .Img {
		 padding: 0
	}
	.bannerBox  #banner .Txt{
		 width: 95%;
	}
	.bannerBox .title {
		*font-size: .6rem !important; padding: var(--banner_title_padding_mobile) !important; word-wrap:break-word ;	white-space: pre-line;	line-height: 1.1;	word-spacing: 0px!important; letter-spacing: 0rem; 
	}
	.bannerBox .show .title.box-,.bannerBox .show .title.box-1, .bannerBox .show .title.box-2, .bannerBox .show .title.box-3 {
		padding: 10px;
	}
	.bannerBox .Txt {
		margin-top: 0 !important;
	}
	.bannerBox .title { 
	  font-size: clamp(10px, 2vw, 16px) !important; /* 根字體大小隨螢幕調整 */
	}
}