/* BEGIN INDEX CSS ----------------------------------------------> */

#bodyInner
{
	background: none;
}

#index #content
{
	margin: 0px;
}

#index #mainContent
{
	margin: 0;
	padding: 0;
}

#index #homeAnimation
{
	position: relative;
	width: calc(100% + 4.65vw + 68px);
	height: calc(100vh - 82px);
	height: 100vh;
	margin: 0 0 0 -4.65vw;
	background: #ccc;
}

#index #homeAnimation ul,
#index #homeAnimation ul li
{
	position: relative;
	list-style: none;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#index #homeAnimation .image
{
	position: relative;
	z-index: 1;
	overflow: hidden;
}

#index #homeAnimation .image::after
{
	content: '';
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to left, rgba(0,0,0,0.30) 15%, transparent);
}

#index #homeAnimation .image::before
{
	content: '';
	position: absolute;
	z-index: 3;
	top: -10px;
	left: -22.5vw;
	width: 845px;
	height: 884px;
	background: url('../i/grid-home-bg.svgz') left top no-repeat; /* data-uri */
	background-size: 44vw auto;
}

#index #homeAnimation .image img
{
	display: block;
	width: 100%;
	height: calc(100vh - 82px);
	height: 100vh;
	object-fit: cover;
}

#index #homeAnimation .info
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	z-index: 4;
	top: 0;
	bottom: 0;
	right: 9vw;
	width: 100vw;
	max-width: 520px;
	margin: auto 0px;
	text-align: right;
}

#index #homeAnimation .info .title
{
	margin-top: -10rem;
	box-sizing: border-box;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 300;
	line-height: 1.3;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: right;
}

#index #homeAnimation .info .title p
{
	margin: 0;
	padding: 0;
}

#index #homeAnimation .info .attribution
{
	margin-top: 14px;
	color: #BCCDD6;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 2px;
}

#index #homeAnimation ul li .sp_pencil
{
	position: absolute;
	bottom: 10px;
	right: 10px;
}

#belowContent
{
	position: fixed;
	bottom: 100px;
	bottom: 0px;
	bottom: 30px;
	/*left: calc(-25vw + -120px);*/
	left: 0;
}

#footer
{
	margin-top: 0px;
}

.staticNews
{
	margin-top: 0;
}

@media (min-width: 1050px)
{
	#index #content
	{
		max-width: unset;
		margin: 0rem 0px 0 25vw;
	}
}

@media (min-width: 1050px) and (max-height: 840px)
{
	#index #content
	{
		min-height: 988px;
	}
	
	#index #homeAnimation
	{
		height: 988px;
	}
	
	#index #homeAnimation .image img
	{
		height: 988px;
	}
	
	#belowContent
	{
		position: absolute;
		bottom: 100px;
		/*left: calc(-25vw + -120px);*/
		left: 0px;
	}
}

@media (min-width: 1500px) and (max-height: 998px)
{
	#index #content
	{
		min-height: 988px;
	}
	
	#index #homeAnimation
	{
		height: 988px;
	}
	
	#index #homeAnimation .image img
	{
		height: 988px;
	}
	
	#belowContent
	{
		position: absolute;
		bottom: 100px;
		left: 0px;
	}
}

@media (max-width: 1349px)
{
	#index #homeAnimation
	{
		width: calc(100% + 44px + 20px);
		margin: 0 0 0 -44px;
	}
}

@media (max-width: 1270px)
{
	#index #homeAnimation .info
	{
		max-width: 500px;
	}
}

@media (max-width: 1050px)
{
	#header,
	#logo
	{
		position: fixed;
	}
		
	#index #content
	{
		min-height: 72vh;
	}
	
	#index #homeAnimation
	{
		position: fixed;
		left: 0px;
		height: 100vh;
		width: 100%;
		margin: 0px;
	}
	
	#index #homeAnimation .image::before
	{
		top: 30vw;
		left: -18vw;
		width: 845px;
		height: 884px;
		background: url('../i/grid-home-bg.svgz') left top no-repeat; /* data-uri */
		background-size: 44vw auto;
	}
	
	#index #homeAnimation .image img
	{
		height: 100vh;
	}
	
	#index #homeAnimation .info
	{
		right: 16px;
		left: unset;
		width: calc(100vw - 32px);
		/*max-width: unset;*/
	}
	
	#index #homeAnimation .info .title
	{
		margin: 0;
		font-size: 1.8rem;
	}
	
	#belowContent
	{
		position: relative;
		bottom: 40px;
		left: 45px;
	}
	
	/*.cycle-carousel-wrap*/
	/*.homeNews
	{
		left: -48vw !important;
	}*/
}

@media (max-width: 767px)
{
	#index #content
	{
		min-height: 68vh;
	}
	
	#index #homeAnimation .info
	{
		top: 250px;
		bottom: unset;
	}
	
	/*.cycle-carousel-wrap*/
	/*.homeNews
	{
		left: -90px !important;
	}*/
}

/* Home Alert Message */

#alertMessage
{
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 98;
	width: 100%;
	padding: 20px 80px 20px 80px;
	background: black;
	box-sizing: border-box;
	color: #ffffff;
	line-height: 1.2;
	text-align: center;
}

#alertMessage p,
#alertMessage p *
{
	margin: 0;
	padding: 0;
	color: #ffffff;
}

#alertMessage a
{
	text-decoration: underline;
}

@media (max-width: 1349px)
{
	#alertMessage
	{
		padding: 20px 44px 20px 44px;
	}
}

@media (max-width: 1024px)
{
	#alertMessage
	{
		padding: 12px 16px 12px 16px;
		font-size: 0.9rem;
	}
}


/* Home Notice Message */

#noticeMessage
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: calc(50% - 5vh);
	left: calc(50% - 45vw);
	z-index: 99;
	height: 10vw;
	width: 90vw;
	background: #000000;
}

#noticeMessage:not(.open)
{
	display: none;
}

#noticeMessage > div
{
	position: relative;
	z-index: 999999;
	overflow: hidden;
	width: 100%;
	background: #000000;
	color: #ffffff;
	font-size: 1.1rem;
}

#noticeMessage > div > div
{
	margin: 0;
	padding: 1.5em 2.5em;
}

#noticeMessage > div div p
{
	margin: 0;
	padding: 0;
}

.noticebuttons
{
	margin-top: 1em;
}

#noticeMessage .noticebuttons > *
{
	margin-right: 1em;
}


/* END INDEX CSS ------------------------------------------------> */