#mainvision {
	position:relative;
	width:100%;
	/*height:calc(100vh - 100px); only mainvision in index */
	height:calc(100vh - 55px);
}
#mainvision a.ad {
	display:block;
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:calc(100vh - 55px);
	color:#fff;
	text-decoration:none;
	font-size: 22px;
}
#mainvision a.ad:before {
	content:'';
	width:100%;
	height:calc(100vh - 55px);
	position:absolute;
	top:0px;
	left:0px;
	background:-moz-linear-gradient(left,rgba(88,88,88,0.4) 0%,rgba(88,88,88,0.4) 100%);
	background:-webkit-gradient(linear,left top,right top,color-stop(0%,rgba(88,88,88,0.4)),color-stop(100%,rgba(88,88,88,0.4)));
	background:-webkit-linear-gradient(left,rgba(88,88,88,0.4) 0%,rgba(88,88,88,0.4) 100%);
	background:-o-linear-gradient(left,rgba(88,88,88,0.4) 0%,rgba(88,88,88,0.4) 100%);
	background:-ms-linear-gradient(left,rgba(88,88,88,0.4) 0%,rgba(88,88,88,0.4) 100%);
	background:linear-gradient(to right,rgba(88,88,88,0.4) 0%,rgba(88,88,88,0.4) 100%);
	z-index:100;
}
#mainvision .vision_caption{
	position:absolute;
	left:0px;
	top:40%;
	width:100%;
	z-index:101;
}
#mainvision .vision_caption h1{margin-top:-75px;font-size:58px;font-weight:1000;font-family:"Helvetica Neue", Arial, "微軟正黑體", "Microsoft JhengHei", "新細明體" , PMingLiU, sans-serif;color:white}
#mainvision .vision_caption h1:hover{margin-top:-75px;font-size:58px;font-weight:1000;font-family:"Helvetica Neue", Arial, "微軟正黑體", "Microsoft JhengHei", "新細明體" , PMingLiU, sans-serif;color:#d9b310}
#mainvision .vision-item{width:100%;text-align:center;display:none;}
#mainvision .control {
	position:absolute;
	left:15px;
	bottom:80px;
}
#mainvision .control a {
	top:-20px;
	display:inline-block;
	padding:0px;
	margin:5px;
	width:15px;
	height:15px;
	background:none;
	border:2px solid transparent;
	border-radius:100%;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
#mainvision .control a:before {
	content:'';
	width:7px;
	height:7px;
	position:absolute;
	top:2px;
	left:2px;
	background:#d9b310;
	border-radius:100%;
}
#mainvision .control a:hover,#mainvision .control a.active {
	background:none;
	border:2px solid #FFF;
}
#mainvision .control a,#mainvision .control a:hover{
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	-o-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
#mainvision .control a span {display:none;}

@media (max-width: 767px) {
	/*#mainvision {height:calc(100vh - 90px);} only mainvision in index */
	#mainvision {height:calc(100vh - 45px);}
	#mainvision a.ad {height:calc(100vh - 45px);}
	#mainvision a.ad:before {height:calc(100vh - 45px);}
	#mainvision .vision_caption{top:30%;}
	#mainvision .vision_caption h1{font-size:30px;}
	#mainvision .control {bottom:15px;}
}



/* mainvision -- startblock Start */
.startblock{position:absolute;width:100%;left:0px;bottom:100px;z-index:101;}
@media (max-width: 767px) {
	.startblock{bottom:175px;}
}
.btn-start {
	border-radius:100%;
	color:#fff;
	background-color:transparent;
	border:2px solid #fff;
}
.btn-start:hover,
.btn-start:focus,
.btn-start:active {
	color:#d9b310;
	background-color:transparent;
}
.tostart{width:60px;height:60px;line-height:60px;padding:0px;}
/* mainvision -- startblock End */

/* mainvision -- tostart-front and tostart-back Start */
.startblock a {
	position:relative;
	-webkit-transform:perspective(1000px);
	-webkit-transform-style:preserve-3d;
	-moz-transform:perspective(1000px);
	-moz-transform-style:preserve-3d;
	-ms-transform:perspective(1000px);
	-ms-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
.tostart-front,.tostart-back {
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;
    -webkit-transition:0.6s;
    -moz-transition:0.6s;
    -o-transition:0.6s;
    -ms-transition:0.6s;
    transition:0.6s;
    position:absolute;
    top:0;
    left:0;
    width:60px;
    height:60px;
}
.tostart-front {
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -o-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    transform:rotateY(0deg);
}
.tostart-back {
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    -ms-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}

.startblock a:hover .tostart-front {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.startblock a:hover .tostart-back {
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    -o-transform:rotateY(0deg);
    -ms-transform:rotateY(0deg);
    transform:rotateY(0deg)
}
/* mainvision -- tostart-front and tostart-back End */