#mainvision{width:calc(100% - 50px);margin:10px auto 0px;border-radius:30px;overflow:hidden;}
#mainvision .item{height:calc(100vh - 25px);position:relative;}
#mainvision .item-bg{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:calc(100vh - 25px);
	overflow:hidden;
}
#mainvision .owl-item.active .item-bg{animation:animatedbackground 15s ease-in-out infinite alternate;}

@keyframes animatedbackground{
	from{transform:scale(1.0);}
	to{transform:scale(1.5);}
}

a.vision-link{display:block;height:calc(100vh - 25px);color:#000;position:relative;}
a.vision-link:hover,
a.vision-link:focus{color:#000;}

a.vision-link:before{
	content:'';
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:calc(100vh - 25px);
	background:rgba(0,0,0,0.3);
}
.vision-content{
	position:absolute;
	width:70%;
	left:0px;
	bottom:0px;
	padding:60px 20px;
	line-height:1.3;
	background:#F5F5F5 url(../images/bg_b.png);
	border-radius:0px 30px 0px 0px;
}
.vision-content svg.space{
	display:block;
	position:absolute;
	left:0px;
	top:-30px;
	width:30px;
	height:auto;
	transform:rotate(-90deg);
}
.vision-content svg.space:last-of-type{
	left:auto;
	right:-30px;
	top:auto;
	bottom:0px;
}

.main-title{margin:0px;}
.vision-txt{margin:20px 0px 0px;}

@media (max-width: 1199px) {
	#mainvision{width:calc(100% - 20px);}
	#mainvision .item{height:calc(100vh - 91px);}
	#mainvision .item-bg{height:calc(100vh - 91px);}
	a.vision-link{height:calc(100vh - 91px);color:#FFF;}
	a.vision-link:hover,
	a.vision-link:focus{color:#FFF;}
	a.vision-link:before{height:calc(100vh - 91px);}
	.vision-content{padding:20px 20px;background:transparent;}
	.vision-content svg.space{display:none;}
}

/* owl-nav Start */
#mainvision .owl-nav.disabled + .owl-dots{
	position:absolute;
	right:10px;
	bottom:60px;
	margin-top:0px;
}
#mainvision .owl-dots .owl-dot span{
	width:15px;
	height:15px;
	margin:0px 5px;
	background:none;
	border:2px solid transparent;
	position:relative;
	transition:all 0.5s ease;
}
#mainvision .owl-dots .owl-dot.active span,
#mainvision .owl-dots .owl-dot:hover span{border:2px solid #FFF;}

#mainvision .owl-dots .owl-dot span:before{
	content:'';
	width:7px;
	height:7px;
	position:absolute;
	top:2px;
	left:2px;
	background:#FFF;
	border-radius:100%;
}
/* owl-nav End */

/* btn-box Start */
.btn-box{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:12px 20px;
	margin-top:30px;
	font-size:18px;
	font-weight:bold;
	color:#000;
	border:2px solid #000;
	border-radius:30px;
	text-decoration:none;
	overflow:hidden;
	cursor:pointer;
	position:relative;
}
.arrow{
	width:24px;
	height:24px;
	flex-shrink:0;
	position:relative;
}
.arrow path{transition:transform 0.3s ease;}
.btn-box:hover .arrow path{animation:slideArrow 0.6s;}

@keyframes slideArrow{
	0%{
		transform:translate(0, 0);
		opacity:1;
	}
	50%{
		transform:translate(6px, -6px);
		opacity:0;
	}
	51%{
		transform:translate(-6px, 6px);
		opacity:0;
	}
	100%{
		transform:translate(0, 0);
		opacity:1;
	}
}

@media (max-width: 1199px) {
	.btn-box{
		color:#FFF;
		border:2px solid #FFF;
	}
}

@media (max-width: 575px) {
	.btn-box{font-size:14px;}
}
/* btn-box End */

/* animate.css add Start */
.delay-0{animation-delay:0s;}
.delay-1{animation-delay:0.5s;}	/* 延遲 0.5 秒 */
.delay-2{animation-delay:1s;}	/* 延遲 1 秒 */
/* animate.css add End */