/*********************************************************** small screen */
	#TopBackground {
		height: calc(100vw * 685 / 2150);
		display: block;
	}

	#TopBackgroundShadow {
		display: none;
	}

	#TopContent {
		width: 100%;
	}

	#TopContentLeft {
		width: 0%;
		display: none;
	}

	#TopContentRight {
		width: 100%;
		display: inline-block;
	}

	#TopContentTitleMobile {
		display: inline-block;
	}

	#TopContentTitleMobileLine1 {
		font-size: 22px;
		line-height: normal;
	}
	#TopContentTitleMobileLine2 {
		font-size: 30px;
		line-height: 30px;
	}
	#TopContentTitleMobileLine3 {
		font-size: 14px;
		line-height: 15px;
	}

/*********************************************************** medium screen */
@media screen and (min-width: 800px) {
	#TopBackground {
		height: calc(100vw * 685 / 2150);
		display: block;
	}

	#TopBackgroundShadow {
		display: block;
	}

	#TopContent {
		width: calc(100% - 100px);
	}

	#TopContentLeft {
		width: 35%;
		display: inline-block;
	}

	#TopContentRight {
		width: 65%;
		display: inline-block;
	}

	#TopContentTitleLine1 {
		font-size: 16px;
		line-height: normal;
	}
	#TopContentTitleLine2 {
		font-size: 18px;
		line-height: 18px;
	}
	#TopContentTitleLine3 {
		font-size: 13px;
		line-height: 14px;
	}

	#TopContentTitleMobile {
		display: none;
	}
}

/*********************************************************** large screen */
@media screen and (min-width: 1120px) {
	#TopBackground {
		height: 366px;
		display: block;
	}

	#TopBackgroundShadow {
		display: block;
	}

	#TopContent {
		width: calc(100% - 100px);
	}

	#TopContentLeft {
		width: 35%;
		display: inline-block;
	}

	#TopContentRight {
		width: 65%;
		display: inline-block;
	}

	#TopContentTitleLine1 {
		font-size: 16px;
		line-height: normal;
	}
	#TopContentTitleLine2 {
		font-size: 25px;
		line-height: 27px;
	}
	#TopContentTitleLine3 {
		font-size: 13.5px;
		line-height: 15px;
	}

	#TopContentTitleMobile {
		display: none;
	}
}


/*********************************************************** Top Content */
#TopBackground {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	min-height: 300px;/*250*/
	background: rgb(39, 33, 32);

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#TopBackgroundShadow {
	position: absolute;
	top: 0px;
	left: 0px;
	width: calc((100% - 100px) * 0.3 + 50px);
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}

#TopContent {
	position: relative;
	top: 0px;
	left: 0px;
	background: transparent;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
}

#TopContentLeft {
	position: relative;
	top: 0px;
	left: 0px;
	background: transparent;
	background-repeat: repeat;
	background-image: url("assets/images/common/pattern-1.png");
}

#TopContentRight {
	position: relative;
	top: 0px;
	left: 0px;
	height: calc(100vw * 565 / 2150 + 40px);
	min-height: 310px;/*250*/
	max-height: 370px;/*250*/
	background: transparent;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

#TopContentTitle {
	position: absolute;
	top: 100px;
	left: 20px;
	width: calc(100% - 40px);
}

#TopContentTitleLine1 {
	position: relative;
	top: 0px;
	left: 0px;
}
#TopContentTitleLine2 {
	position: relative;
	top: 0px;
	left: 0px;
}
#TopContentTitleLine3 {
	position: relative;
	top: 0px;
	left: 0px;
	margin: 5px 0px 0px 0px;
}

#TopContentTitleMobile {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	background: rgb(41, 33, 31);
	padding: 30px 50px;

	background-repeat: repeat;
	background-image: url("assets/images/common/pattern-1.png");
}
#TopContentTitleMobileLine1 {
	position: relative;
	top: 0px;
	left: 0px;
}
#TopContentTitleMobileLine2 {
	position: relative;
	top: 0px;
	left: 0px;
}
#TopContentTitleMobileLine3 {
	position: relative;
	top: 0px;
	left: 0px;
}