@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap');


/*
========================================
Tourism
========================================
*/

main { background-color: white; }

.page-banner .tagline {
	top: 50%;
}

.page-banner .content {
	margin: 35px 0 0;
}

.page-banner .inventory-tagline { top: 40%; }

.page-banner .inventory-tagline.for-cn { top: 50%; }

.page-banner .title {
	padding-top: 20px;
}

.page-banner .title.for-cn {
	padding-top: 0;
	margin-top: -20px;
}

.section.gray {
	text-align: center;
	font-size: 1.8em;
	padding: 40px 0 10px;
	font-weight: 500;
	margin-top: 0;
	background-color: #dcdcdc;
}

.section.gray .title { line-height: 100%; }

.detail {
	background-color: white;
	padding: 3% 0;
}

.detail .container-fluid {
	padding-left: 50px;
	padding-right: 50px;
}

.detail .row.one { margin-top: 0; }

.detail .row {
	margin: 5% 0;
}

.detail img {
	width: 100%;
}

.detail .wrapper.right {
	position: absolute;
	bottom: 5%;
	padding-right: 20%;
}

.detail .wrapper.sub-section {
	position: absolute;
	top: 30%;
	padding: 0 15% 0 10%;
}

.row.one .case-title {
	font-size: 3em;
	font-weight: bold;
	margin-bottom: 10px;
}

.row.one .case-sub-title {
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 2.5em;
}

ul {
	padding-left: 20px;
}

.sub-title {
	font-size: 2.5em;
	font-weight: 500;
}

.case-description,
.detail li {
	line-height: 150%;
	font-size: 1.1em;
}

.approaches {
	background-color: #021224;
	padding: 2% 0;
}

.approaches .title {
	color: white;
	font-weight: 500;
	font-size: 3em;
	padding-top: 20px;
	text-align: center;
	margin-bottom: 40px;
}

.approaches .sub-title {
	font-weight: 500;
	color: white;
	font-size: 2.3em;
	margin-bottom: 10px;
}

.approaches li {
	display: inline-flex;
	margin-bottom: 30px;
}
	
.approaches .icon {
	font-size: 3.5em;
	color: white;
	margin-right: 20px;
}

.approaches .icon.adjustment {
	margin-left: 5px;
}

.approaches .text {
	padding-top: 15px;
	color: white;
	font-weight: 300;
}

.hide-for-small-screen { display: none; }

@media only screen and (max-width: 1400px) {
	.page-banner .title.for-cn {
		padding-top: 0;
		margin-top: -10px;
	}

	.detail {
		padding-bottom: 5%;
	}

	.row.one .case-title {
		font-size: 2.5em;
	}

	.row.one .case-sub-title {
		font-size: 1.8em;
	}

	.sub-title {
		font-size: 1.8em;
	}

	.case-description,
	.detail li {
		font-size: 1em;
	}	

	#inventory-row-3,
	#tourism-row-3,
	#online-shopping-row-3 {
		margin-top: 0 !important;
	}	
}

@media only screen and (max-width: 1200px) {
	#inventory-row-3 {
		margin-top: 10% !important;
	}

	.detail .wrapper.sub-section {
		top: 0;
	}

	.detail img {
		margin-bottom: 20px;
	}


}

@media only screen and (max-width: 1024px) {
	.page-banner .content {
		margin: 25px 0 0;
	}
}

@media only screen and (max-width: 992px) {
	.page-banner .content {
		margin: 10px 0 0;
	}

	.page-banner .tagline {
		top: 40%;
	}	

	.detail .wrapper.right {
		position: initial;
		padding-right: 0;
	}

	.detail .wrapper.sub-section {
		position: initial;
		padding: 0;
	}

	.detail .container-fluid {
		padding: 0 15px;
	}

	.hide-for-small-screen { display: block; }
	.hide-for-large-screen { display: none; }

	.row.three {
		margin-top: 20% !important;
	}

	#inventory-row-3 {
		margin-top: -10% !important;
	}

	.detail .row {
		margin: 10% 0;
	}

	.approaches .icon.adjustment { margin-left: 0 !important; }
}


@media only screen and (max-width: 600px) {
	.approaches .title {
		font-size: 2.5em;
	}

	.approaches .sub-title {
		font-size: 2em;
	}

	.approaches .icon {
		font-size: 2.5em;
	}
}