@media all and (min-width:1025px)
{	
	.outerWrap {
		overflow: hidden; position: relative; box-sizing: border-box; margin: 0px; padding: 0px;
	}
	.bannerArea {
		clear: both; position: relative; height: 100%; z-index: 1; box-sizing: border-box; margin: 0px; padding: 0px; 
	}
	.bannerArea .wrap {
		padding: 0px; width: 100%; height: 100%; margin: 0px auto; box-sizing: border-box;
	}
	.bannerBox {
		position: relative; *height: 100%!important; font-family: var(--d71); *font-family: "Oswald", "cwTeXYen", Helvetica, Arial, "微軟正黑體", sans-serif; background-color: rgb(255, 255, 255); margin: 0px; padding: 0px;
	}
	.bannerBox .Img {
		position: relative; margin: 0px; padding: 0px; border: 0px; outline: 0px; 
	}
	.bannerBox .title, .bannerBox .Spacs, .bannerBox .Txt .subTitle { 
		opacity: 0;
	}
	.bannerBox .Img img.image {
		width: 100%; display: block; backface-visibility: hidden; margin: 0px; padding: 0px; outline: 0px; border: 0px currentColor; 
		top: 100% !important; transition: all 20s ease; 
	}
	.bannerBox #banner {
		background: none; margin: 0px; padding: 0px; outline: 0px; border: 0px currentColor; border-image: none; font-size: 100%; vertical-align: baseline;
	}
	.bannerBox #banner>div{
		background: none; margin: 0px; padding: 0px; outline: 0px; border: 0px currentColor; border-image: none; font-size: 100%; vertical-align: baseline;
	}
	.bannerBox .slick-slide .Img img.image  {
		*opacity: 0.8;
	}
	.bannerBox .slick-slide.show .Img img.image {
		top: 2% !important;
	}
	.bannerBox .slick-slide.AAA .Img img.image {
		-webkit-animation: rotateOut 1.5s;
		   -moz-animation: rotateOut 1.5s;
				animation: rotateOut 1.5s;
				animation-fill-mode: forwards;
	}
	.bannerBox .slick-slide.AAA .Img img.image::after {
		opacity: 0.8;
	}
	@keyframes rotateIn {
		0% {
			top: 0 ;
		}
		100% {
			top: -90% !important;
		}
	}
	@-webkit-keyframes rotateIn {
		0% {
			top: 0 !important;
		}
		100% {
			top: -90% !important;
		}
	}
	@keyframes rotateOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@-webkit-keyframes rotateOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	.bannerBox .slick-slide.show .title {
		transition:3.8s; opacity: 1;
	}
	.bannerBox .slick-slide.show .Spacs {
		transition:3.6s 1.2s; opacity: 1;
	}
	.bannerBox .slick-slide.show .Txt .subTitle {
		transition:3.6s 1.4s; opacity: 1; 
	}
	.bannerBox  li, .bannerBox ul, .bannerBox  .img{
		*height: 100%;overflow: hidden
	}
	.scrollDown {
		position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);
	}
	.scrollDown a {
		position: relative; padding-bottom: 8px; font-size: 1.5rem; display: inline-block; color: rgb(255, 255, 255);
	}

	.bannerBox .show .title.box-1 {
		animation: border-square-corner 3s 3s !important; animation-fill-mode: forwards;
	}
	.bannerBox .show .title.box-2::before, .bannerBox .show .title.box-2::after {
		animation: border-corner 3.5s 3s !important ; animation-fill-mode: forwards;
	}
	.bannerBox .show .title.box-2 {
		animation: border-square 3s 3s  !important; animation-fill-mode: forwards;
	}

}
@media all and (max-width:1024px)
{	
	.bannerBox .title {
		font-size: 0.91rem !important;
	}
	.bannerBox .Spacs {
		font-size: 1rem;
	}
	.bannerBox .Txt .subTitle {
		font-size: 1.83rem;  
	}
	.bannerBox .Txt {
		*transform: translate(0, -50%);
	}
}
@media (max-width: 767.98px) 
{
	.bannerBox .title {
		font-size: 0.85rem !important;
	}
	.bannerBox .Spacs {
		font-size: 1.22rem;
	}
	.bannerBox .Txt .subTitle {
		font-size: 1.83rem; 
	}
}
@media (max-width: 575.98px) 
{
	.bannerBox .title {
		font-size: .65rem !important; 
	}
	.bannerBox .Spacs {
		font-size: 14px !important;
	}
	.bannerBox .Txt .subTitle {
		font-size: 1.1rem !important;
	}
}