.banner {
	position: relative;
	height: 100vh;
	background-size: cover;
	background-position: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.banner::after {
	content: '';
	display: block;
	position: absolute;
	background: #000;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform-origin: right top;
	animation: solidInLeft .9s cubic-bezier(0.77, 0, 0.175, 1) both;
}

@keyframes solidInLeft {
	100% {
		transform: scaleX(0);
	}
}
.banner--short {
	height: auto
}
.banner--short::before {
	content: '';
	display: block;
	padding-bottom: 120%;/*375 450*/
}
.banner__heading-en {
	font-size: 70px;
	font-weight: bold;
	line-height: 1.02;
	margin-bottom: 10px;
	display: table;
	animation: fadeIn 1s .45s both;
}
.banner__heading-cht {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 10px;
	display: table;
	animation: fadeIn 1s .45s both;
}
.banner__heading {
	font-size: 48px;
	font-weight: bold;
	line-height: 1.25;
	margin-bottom: 6px;
	animation: fadeIn 1s .45s both;
}
.banner__subheading {
	color: #ccc;
	font-weight: normal;
	animation: fadeIn 1.2s .45s both;
}
.banner__vtl-text {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: rotate(-90deg);
	transform-origin: left top;
	font-size: 14px;
	padding-top: 18px;
	font-weight: 300;
	/* letter-spacing: .05em; */
}
.banner__vtl-text__inner {
	animation: fadeInRight 1s 1.4s both;
}
.banner__infobox {
	max-width: 1400px;
	padding: 60px;
	padding-left: 70px;
	position: relative;
}
.banner--short .banner__infobox {
	padding-left: 60px;
}
.banner__desc {
	line-height: 1.875;
	text-align: justify;
	animation: fadeIn 1.2s .6s both;
}
.banner__desc-line + .banner__desc-line::before {
	content: '，';
}
.banner__imgbox {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.banner__img {
	max-width: none;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* for ie */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.banner__img {
		width: auto;
	}
}


@media (min-width: 768px) {
	
	.banner--short::before {
		padding-bottom: 36.458%;/*1920 700*/
	}
	.banner__desc-line {
		display: block;
	}
	.banner__desc-line + .banner__desc-line::before {
		content: none;
	}
}
@media (min-width: 1024px) {
	.banner {
		background-attachment: fixed;
	}
	.banner__infobox {
		padding-left: 60px;
	}
	.banner__heading-en {
		font-size: 82px;
	}
	.banner__heading-cht {
		font-size: 70px;
		margin-bottom: 15px;
	}
	.banner__heading {
		font-size: 82px;
	}
	.banner__subheading {
		font-size: 18px;
	}
	.banner__vtl-text {
		font-size: 16px;
	}
	.banner__desc {
		font-size: 24px;
		font-weight: bold;
	}
}

@media (min-width: 1230px) {
	.banner__vtl-text {
		padding-top: 100px;
		bottom: -50px;
	}
}