/* 首頁廣告圖片 20241217 */

.mobile_wp {
	display: none;
}

body.hideWindow {
	overflow: hidden;
}

.indexImg {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999999;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	background: rgba(255,255,255,.5);
	padding: 20px;
}

.indexImg::before {
	content: '';
	width: 100%;
	height: 100%;
	backdrop-filter: blur(5px);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

.indexImg_cont {
	position: relative;
	z-index: 5;
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
	display: flex;
}

.indexImg_cont form{
	max-height: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.indexImg_close {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 20;
	font-size: 20px;
	padding: 10px;
	line-height: 1;
	cursor: pointer;
	background: rgba(255,255,255,.3);
}

.indexImg_check {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 10px;
}

.indexImg_check input+label{padding-left: 10px;}

.swiper-indexImg{
	width: 100%;
	max-height: calc(100% - 2em);
	max-width: 100%;
	overflow: hidden;
}

.swiper-indexImg a{
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.swiper-indexImg img{
	max-width: 100%;
	max-height: 80vh;
	display: block;
}




/*首頁 BANNER 2025 12.31前 窩科幫版本 - 伊萍修改過後 */

.bannerindex {
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	--swiper-navigation-color: #dfdfdf;
	--swiper-pagination-color: #dfdfdf;
	--swiper-pagination-bullet-inactive-color: #dfdfdf;
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-bullet-inactive-opacity: .5;
	--swiper-pagination-bullet-horizontal-gap: 5px;
}

.bannerindex * {
	-webkit-transition: ease .3s;
	-moz-transition: ease .3s;
	-ms-transition: ease .3s;
	-o-transition: ease .3s;
	transition: ease .3s;
}

.bannerindex .swiper-banner {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: -50%;
	margin-left: 50%;
}

.bannerindex .swiper-banner .swiper-slide img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

.bannerindex .effect1 img {
	transform: scale(1.05, 1.05) translate(5%, 5%);
	transform: scale(1.05, 1.05) translate(0.5%, 0.5%);
}

.bannerindex .leftUp img {
	-webkit-animation-name: leftUp;
	animation-name: leftUp;
}

@-webkit-keyframes leftUp {
	0% {
		transform: scale(1.05, 1.05) translate(0.5%, 0.5%);
	}

	100% {
		transform: scale(1.05, 1.05) translate(-0.5%, -0.5%);
	}
}

@keyframes leftUp {
	0% {
		transform: scale(1.05, 1.05) translate(0.5%, 0.5%);
	}

	100% {
		transform: scale(1.05, 1.05) translate(-0.5%, -0.5%);
	}
}

.bannerindex .moveRight img {
	-webkit-animation-name: moveRight;
	animation-name: moveRight;
}

@-webkit-keyframes moveRight {
	0% {
		transform: scale(1.05, 1.05) translate(-0.5%, 0);
	}

	100% {
		transform: scale(1.05, 1.05) translate(0.5%, 0);
	}
}

@keyframes moveRight {
	0% {
		transform: scale(1.05, 1.05) translate(-0.5%, 0);
	}

	100% {
		transform: scale(1.05, 1.05) translate(0.5%, 0);
	}
}

.bannerindex .moveDown img {
	-webkit-animation-name: moveDown;
	animation-name: moveDown;
}

@-webkit-keyframes moveDown {
	0% {
		transform: scale(1.05, 1.05) translate(0, -0.5%);
	}

	100% {
		transform: scale(1.05, 1.05) translate(0, 0.5%);
	}
}

@keyframes moveDown {
	0% {
		transform: scale(1.05, 1.05) translate(0, -0.5%);
	}

	100% {
		transform: scale(1.05, 1.05) translate(0, 0.5%);
	}
}

.bannerindex .centerBig img {
	-webkit-animation-name: centerBig;
	animation-name: centerBig;
}

@-webkit-keyframes centerBig {
	100% {
		transform: scale(1.05, 1.05);
	}
}

@keyframes centerBig {
	100% {
		transform: scale(1.05, 1.05);
	}
}

.bannerindex .rightDownBig img {
	-webkit-animation-name: rightDownBig;
	animation-name: rightDownBig;
}

@-webkit-keyframes rightDownBig {
	100% {
		transform: scale(1.05, 1.05) translate(0.5%, 0.5%);
	}
}

@keyframes rightDownBig {
	100% {
		transform: scale(1.05, 1.05) translate(0.5%, 0.5%);
	}
}

.bannerindex .swiper-banner .swiper-slide img {
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}


@media screen and (max-width: 768px) {
	.bannerindex {
		position: relative;
		height: 0;
		padding-bottom: 47%
	}

	.bannerindex .swiper-banner {
		left: 0;
		margin: 0;
	}

	.bannerindex .swiper-banner .swiper-slide img {
		height: auto;
	}	
}












/* ================================================================================ */
/* ====== 2026.1.1 開始會有 三種新切換方式 再加上 之前的  隨機效果輪播版本 ============= */
/* ================================================================================ */


.BannerHome02 ~ #content_main { margin-top: 0;}
.BannerHome02 { width: 100%; height: 700px; overflow: hidden; position: relative;
	--swiper-navigation-color: #dfdfdf;
	--swiper-pagination-color: #dfdfdf;
	--swiper-pagination-bullet-inactive-color: #dfdfdf;
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-bullet-inactive-opacity: .5;
	--swiper-pagination-bullet-horizontal-gap: 5px;
}
.BannerHome02 * {
	-webkit-transition: ease .3s;
	-moz-transition: ease .3s;
	-ms-transition: ease .3s;
	-o-transition: ease .3s;
	transition: ease .3s;
}
.BannerHome02 .swiperBan02 { width: 100%; height: 100%; position: absolute; left: -50%; top: 0; margin-left: 50%;}
.BannerHome02 .swiperBan02 .swiper-slide img { display: block; width: 100%; height: 700px; object-fit: cover;}
.BannerHome02 .swiper-button-next svg,
.BannerHome02 .swiper-button-prev svg { display: none; opacity: 0;}

.BannerHome02 .swiper-pagination-bullet { border-radius: 30px; background: #000; width: 6px; height: 6px;}
.BannerHome02 .swiper-pagination-bullet-active { width: 30px;}

@media (max-width:1400px) { 
	.BannerHome02 { height: 600px;}
}
@media (max-width:1024px) { 
	.BannerHome02 { height: 500px;}
}
@media (max-width:768px) { 
	.BannerHome02 { height: 400px;}
}



/* 2025.12.26*/
/* 
基於原基礎的動畫效果下
保留原始語法 這邊可不用開啟
效果要更寫....保持在 CUSTOM 進行

2025.12.26 中間縮小
.BannerHome02 .swiperBan02 .swiper-slide img { transition: transform 5s ease-out; will-change: transform; transform: scale(1.06);}
.BannerHome02 .swiperBan02 .swiper-slide-active img { transform: scale(1);}

2025.12.26 中間放大
.BannerHome02 .swiperBan02 .swiper-slide img { transition: transform 5s ease-out; will-change: transform; transform: scale(1);}
.BannerHome02 .swiperBan02 .swiper-slide-active img { transform: scale(1.06);}

2025.12.26 放大平移向左
.BannerHome02 .swiperBan02 .swiper-slide img {  transition: transform 5s ease-out; will-change: transform; transform: scale(1.06) translate(0.6%, 0.6%);}
.BannerHome02 .swiperBan02 .swiper-slide-active img { transform: scale(1.06) translate(-0.6%, -0.6%);}
*/

/*2025.12.26 放大平移向右*/
.BannerHome02 .swiperBan02 .swiper-slide img {  transition: transform 5s ease-out; will-change: transform; transform: scale(1.06) translate(-0.6%, -0.6%);}
.BannerHome02 .swiperBan02 .swiper-slide-active img { transform: scale(1.06) translate(0.6%, 0.6%);}







.BannerHome03 ~ #content_main { margin-top: 0;}
.BannerHome03 { width: 100%; position: relative;
	--swiper-navigation-color: #dfdfdf;
	--swiper-pagination-color: #dfdfdf;
	--swiper-pagination-bullet-inactive-color: #dfdfdf;
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-bullet-inactive-opacity: .5;
	--swiper-pagination-bullet-horizontal-gap: 5px;
}
.BannerHome03 * {
	-webkit-transition: ease .3s;
	-moz-transition: ease .3s;
	-ms-transition: ease .3s;
	-o-transition: ease .3s;
	transition: ease .3s;
}
.BannerHome03 .swiperBan03 {}
.BannerHome03 .swiperBan03 .swiper-slide img { display: block; width: 100%; height: 700px; object-fit: cover;}

.BannerHome03 .thumbs03 { position: absolute; left: 50%; bottom: -20px; z-index: 5; transform: translateX(-50%); width: 500px;}
.BannerHome03 .thumbs03 .swiper-slide { width: 33% !important; height: auto !important;}
.BannerHome03 .thumbs03 .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}

.BannerHome03 .swiper-button-next svg,
.BannerHome03 .swiper-button-prev svg { display: none; opacity: 0;}

@media (max-width:1400px) { 
	.BannerHome03 .swiperBan03 .swiper-slide img { height: 600px;}
}
@media (max-width:1024px) { 
	.BannerHome03 .swiperBan03 .swiper-slide img { height: 500px;}
}
@media (max-width:768px) { 
	.BannerHome03 .swiperBan03 .swiper-slide img { height: 400px;}
}






.BannerHome04 ~ #content_main { margin-top: 0;}
.BannerHome04 { width: 100%; position: relative;
	--swiper-navigation-color: #dfdfdf;
	--swiper-pagination-color: #dfdfdf;
	--swiper-pagination-bullet-inactive-color: #dfdfdf;
	--swiper-pagination-bullet-size: 10px;
	--swiper-pagination-bullet-inactive-opacity: .5;
	--swiper-pagination-bullet-horizontal-gap: 5px;
}
.BannerHome04 .swiperBan04 { height: 80vh !important;}
.BannerHome04 .swiperBan04 .swiper-slide { height: 80vh !important;}
.BannerHome04 .swiperBan04 .swiper-slide img { width: 100%; height: 100%; object-fit: cover;}

.BannerHome04 .swiper-button-next svg,
.BannerHome04 .swiper-button-prev svg { display: none; opacity: 0;}

.BannerHome04 .swiper-pagination-bullet { border-radius: 30px; background: #000; width: 6px; height: 6px;}
.BannerHome04 .swiper-pagination-bullet-active { width: 30px;}

.BannerHome04 .swiper-pagination-fraction { color: #fff;}
.BannerHome04 .swiper-pagination-current { color: #fff;}

/*-------------------------------------------------*/
:root {
	--FixHomeScrollColor01: #000000;
  	--FixHomeScrollColor02: #ffffff;
  	--FixHomeScrollColor03: #999999;
}
#HomeBan_scroll_down { display: block; position: absolute; left: 50%; bottom: 30px; z-index: 999; transform: translateX(-50%); width: 20px;}
#HomeBan_scroll_down a { display: block; width: 100%;}
#HomeBan_scroll_down a em { display: block; position: relative; width: 100%; height: 50px; border: 2px solid var(--FixHomeScrollColor02); border-radius: 50px;}
#HomeBan_scroll_down a em::before {
  content: ''; position: absolute; left: 50%; top: 10px; background: var(--FixHomeScrollColor02);
  width: 4px; height: 4px; margin-left: -2px; border-radius: 100%;
  animation: sdb10 2s infinite;
}

#HomeBan_scroll_down a i { position: relative; display: block; width: 100%; height: 12px; margin: 5px 0; opacity: 0;}
#HomeBan_scroll_down a i:before,
#HomeBan_scroll_down a i:after { content: ""; display: block; position: absolute; width: 2px; height: 20px; background: var(--FixHomeScrollColor02); transition: all 100ms ease-in-out; }
#HomeBan_scroll_down a i:before { bottom: 4px; left: 50%; transform: rotate(-40deg) translateX(-8px);}
#HomeBan_scroll_down a i:after  { bottom: 4px; left: 50%; transform: rotate(40deg) translateX(8px);}

#HomeBan_scroll_down a span { display: block; position: relative; width: 100%;}

@-webkit-keyframes sdb10 {
    0% { -webkit-transform: translate(0, 0); opacity: 0;}
   40% { opacity: 1;}
   80% { -webkit-transform: translate(0, 20px); opacity: 0;}
  100% { opacity: 0;}
}
@keyframes sdb10 {
    0% { transform: translate(0, 0); opacity: 0;}
   40% { opacity: 1;}
   80% { transform: translate(0, 20px); opacity: 0;}
  100% { opacity: 0;}
}


@media (max-width:1400px) { 
}
@media (max-width:1024px) { 
}
@media (max-width:768px) { 
}