@font-face { font-family: 'Roboto'; font-style: NORMAL; font-weight: 100; font-display: swap; src: url('fonts/Roboto-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: NORMAL; font-weight: 300; font-display: swap; src: url('fonts/Roboto-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: NORMAL; font-weight: 400; font-display: swap; src: url('fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: NORMAL; font-weight: 500; font-display: swap; src: url('fonts/Roboto-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: NORMAL; font-weight: 700; font-display: swap; src: url('fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: NORMAL; font-weight: 900; font-display: swap; src: url('fonts/Roboto-Black.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: ITALIC; font-weight: 100; font-display: swap; src: url('fonts/Roboto-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: ITALIC; font-weight: 300; font-display: swap; src: url('fonts/Roboto-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: ITALIC; font-weight: 400; font-display: swap; src: url('fonts/Roboto-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: ITALIC; font-weight: 500; font-display: swap; src: url('fonts/Roboto-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: ITALIC; font-weight: 700; font-display: swap; src: url('fonts/Roboto-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-style: ITALIC; font-weight: 900; font-display: swap; src: url('fonts/Roboto-BlackItalic.ttf') format('truetype'); }


@font-face { font-family: 'Roboto Condensed'; font-style: NORMAL; font-weight: 300; font-display: swap; src: url('fonts/RobotoCondensed-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-style: NORMAL; font-weight: 400; font-display: swap; src: url('fonts/RobotoCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-style: NORMAL; font-weight: 700; font-display: swap; src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-style: ITALIC; font-weight: 300; font-display: swap; src: url('fonts/RobotoCondensed-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-style: ITALIC; font-weight: 400; font-display: swap; src: url('fonts/RobotoCondensed-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Condensed'; font-style: ITALIC; font-weight: 700; font-display: swap; src: url('fonts/RobotoCondensed-BoldItalic.ttf') format('truetype'); }

#mainHeader  {
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow: hidden;
} 
#headerBox  {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
} 

#headerPicBelt {
	height: 30vh;
	width: 100%;
	background-size: auto 100%;
  background-position: center center;
}
.headerInfo p {
	font-family: 'Roboto Condensed';
	color: #222;
	margin: 15px 0px 5px 0px;
	font-size: 2vh;
	line-height: 1.5;
}
.headerInfo h1, .headerInfo p.headLine {
	font-family: 'Roboto';
	color: #222;
	margin: 5px 0px;
	font-size: 4vh;
	font-weight: normal;
	line-height: 1;
}

.divLogoLine {
	display: flex;
	height: 40vh;
	align-items: center;
	justify-content: flex-end;
	cursor: pointer;
}
#divLogoLineOffset {
	display: block;
	width: 100%;
	height: 15vh;
}
#divLogoLineAddLen {
	width: 100%;
	height: 106vh;
}
.imgLogoLine {
	height: auto;
	margin-right: 5vw;
	text-align: end;
}
.divSlideLine {
	opacity: 0;
	position: fixed;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	background-repeat: no-repeat;
	background-position: center;
  background-size: cover;
  -webkit-box-shadow: inset 0px 0px 5vh 1vh rgba(0,0,0,0.5); 
	box-shadow: inset 0px 0px 5vh 1vh rgba(0,0,0,0.5);
}
.divSlideHigh {
	width: 103%;
	margin-left: -3%;
	margin-top: 15%;
	background-color: rgba(255, 255, 255, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.divSlideText {
	width: 80%;
	margin-top: 5vh;
	margin-bottom: 5vh;
	margin-left: 13%;
	font-size: 26px;
	color: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.divSlideText h2 {
	font-family: 'Roboto Condensed';
	color: #222;
	margin: 5px 0px;
	font-size: 3.5vh;
}
.divSlideText p {
	font-family: 'Roboto Condensed';
	color: #222;
	margin: 5px 0px;
	font-size: 2vh;
}
#loadScreenOuter {
	z-index: 100;
	opacity: 1;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}
#loadScreenInner {
	background-color: #fff;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  -ms-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
#scrollDownIcon {
	position: fixed;
	bottom: 15px;
	width: 100%;
	display: flex;
 	z-index: 5;
 	justify-content: center;
 	align-items: flex-end;
}
#mainFooter {
	position: fixed;
	top: 100%;
 	width: 100%;
 	height: 100%;
 	background-color: #fff;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
	align-items: center;
 	z-index: 99;
}
#mainFooter p {
	font-family: Helvetica;
	margin-top: 3vh;
	color: #222;
	text-align: center;
	font-size: 1.3vh;
}

@media screen and (orientation:portrait) {
	body {
		margin: 0px;
		padding: 0px;
		background: #3498db;
	}
	.headerInfo {
		width: 80%;
		margin-left: 10%;
	}
	#loadLogo {
		width: 50%;
	}
	#divLogoLineOffset {
		display: none;
	}
	#divCompanyContainer {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}
	#divLogoContainer {
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	#fillerLogoLine {
		display: none;
	}
	#fillerPortrait {
		width: 100%;
		position:fixed;
		top: 100%;
		right: 0px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: left;
		height: 100%;
		background-color: #cfcfcf;
	}
	#fillerLandscape {
		display: none;
	}
	.divSlideLine {
		bottom: 0px;
		right: 0px;
		width: 100%;
		height: 60%;
	}
	.imgLogoLine {
		width: 50%;
	}
	#scrollDownIcon img {
		width: 15%;
	}
}
@media screen and (orientation:landscape) {
	body {
		margin: 0px;
		padding: 0px;
		background: linear-gradient(90deg, rgba(52,152,219,1) 0%, rgba(52,152,219,1) 40%, rgba(207,207,207,1) 40.001%, rgba(207,207,207,1) 100%);
	}
	.headerInfo {
		width: 50%;
		margin-left: 25%;
	}
	#loadLogo {
		width: 20%;
	}
	#divCompanyContainer {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}
	#divLogoContainer {
		width: 40%;
		height: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	#fillerLandscape {
		width: 60%;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: left;
	}
	#fillerLogoLine {
		display: block;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 40%;
		height: 60%;
		z-index: 1;
		background: linear-gradient(180deg, rgba(52,152,219,0) 0%, rgba(52,152,219,1) 3%, rgba(52,152,219,1) 100%);
	}
	#fillerPortrait {
		display: none;
	}
	.divSlideLine {
		top: 0px;
		right: 0px;
		width: 60%;
		height: 100%;
	}
	.imgLogoLine {
		width: 30%;
	}
	#scrollDownIcon img {
		width: 5%;
	}
}


.scroll-ani {
	position: absolute;
	-webkit-animation: scroll-ani-keys 5s ease-in-out 0s infinite both;
	        animation: scroll-ani-keys 5s ease-in-out 0s infinite both;
}

@-webkit-keyframes scroll-ani-keys {
  0%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
  2%   { -webkit-transform: translateY(10px);  transform: translateY(10px); }
  4%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
  8%   { -webkit-transform: translateY(10px);  transform: translateY(10px); }
  10%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
  100%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
}
@keyframes scroll-ani-keys {
  0%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
  2%   { -webkit-transform: translateY(10px);  transform: translateY(10px); }
  4%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
  8%   { -webkit-transform: translateY(10px);  transform: translateY(10px); }
  10%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
  100%   { -webkit-transform: translateY(0px);  transform: translateY(0px); }
}