.swiper {
	/*overflow: hidden;
	visibility: hidden;*/ /* 先隱藏，等 Swiper 好了再顯示 */
}
.swiper.swiper-initialized {
	/*visibility: visible;*/ /* Swiper 官方會在初始化後加上這個 Class */
}
.swiper-slide {
	width: 100%; /* 這是 mobile first 的預設 */
}


/* ===== 輪播圖 [use swiper js] */
.banner-container{
	position:relative;
}
/* 確保 swiper 容器有明確的高度或隨內容撐開 */
.swiper-banner {
	width: 100%;
	height: auto;
}


.banner-next, 
.banner-prev {
	display:none;
	position:absolute; z-index:100; top:50%;
	width: 60px; height: 100%;
	transform:translate(0,-50%);
	transition: all 0.3s ease;
}
.banner-next { right: 0; }
.banner-prev { left: 0; }

.banner-next:before, 
.banner-prev:before{
	position:absolute; top:50%; left:50%; content:"";
	width:40px; height:40px;
	
	background-color:#fff;
	
	-webkit-mask-position:center;
			mask-position:center;
	
	-webkit-mask-repeat:no-repeat;
			mask-repeat:no-repeat;
	
	-webkit-mask-size:100% 100%;
			mask-size:100% 100%;
			
	transform:translate(-50%,-50%);
}
.banner-next:before{
	-webkit-mask-image:url(../images/icon/icon_arrow_right_line.svg);
			mask-image:url(../images/icon/icon_arrow_right_line.svg)
}
.banner-prev:before{
	-webkit-mask-image:url(../images/icon/icon_arrow_left_line.svg);
			mask-image:url(../images/icon/icon_arrow_left_line.svg);
}
@media (min-width:992px){
	.banner-next, 
	.banner-prev{
		display:block;
	}
	.banner-next:hover, 
	.banner-prev:hover{
		background:rgba(255,255,255,0.1);
	}
	.banner-next:hover:before, 
	.banner-prev:hover:before{
		background-color:var(--color-accent);
	}
}


.swiper-banner .swiper-pagination{
	display:none;
	opacity:0;
}
@media (min-width:992px){
	.swiper-banner .swiper-pagination{
		display:block;
		opacity:1;
	}
}