@charset "utf-8";
@import url('../../../_bk_plugin_css/gFontEN/Marvel.css');
@import url('../../../_bk_plugin_css/gFontTC/cwTeXHei.css');

/* font-family: 'cwTeXHei'; */

body {
	display: flex;
	max-width: 1920px;
	font-family: 'cwTeXHei';
}

/*============================================================================*/

.ep-main {
	display: inline-block; position: relative; width: 100vw; height: 100vh; max-width: 1920px;
	overflow: hidden;
	transform: translate(0, 0);
}

.ep-bg-overlay {
	/* 使用自定義
	z-index: -1; position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; min-width: 320px; max-width: 1920px; height: 100%;
	background-color: rgba(0, 0, 0, .85);
	*/
}

.ep-bg {
	z-index: -2; display: inline-block; position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; min-width: 320px; max-width: 1920px; height: 100%;
	background-image: url(../../../upfiles/ckfinder/404/404_bg_02.jpg) !important;
	background-repeat: no-repeat;
	-webkit-background-size: cover !important;
	background-size: cover !important;
	overflow-x: hidden;
}
/*----------------------------------------------------------------------------*/

.ep-container { display: flex; justify-content: center; align-items: center; flex-direction: column; position: fixed; width: 100vw; height: 100vh; max-width: 1920px; transform: translate(0, -50px); }

.ep-wrapper { display: flex; justify-content: center; align-content: center; flex-direction: column; position: relative; }

.ep-wrapper .ep-bg-overlaybg {
	z-index: -1; display: flex; justify-content: center; position: absolute; top: -60px; left: 50%; margin-left: -300px; width: 600px; height: 450px;
	border-radius: 12px;
	box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, .65), -20px 0px 30px 0px rgba(255, 255, 255, .25) inset;
	background-color: rgba(255, 255, 255, .35);
}

@media screen and (min-width: 1px) and (max-width: 480px) {
	.ep-wrapper .ep-bg-overlaybg { top: -30px; height: 360px; }
}

.ep-wrapper .ep-counts { display: flex; justify-content: center; align-items: center; width: 100vw; }

.ep-wrapper .ep-counts .ep-numbers {
	color: rgba(255, 255, 255, .95);
	font-family: 'Marvel'; font-size: 100px; font-weight: 500;
	text-shadow: -1px -1px rgba(0, 0, 0, .65), -1px 1px rgba(0, 0, 0, .65), 1px -1px rgba(0, 0, 0, .65), 1px 1px rgba(0, 0, 0, .65), 1px 1px rgba(0, 0, 0, .65);
	-webkit-animation: zoomInUp 1500ms; animation: zoomInUp 1500ms;
}

.ep-wrapper .ep-text {
	display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 50px 0 0 0; width: 100vw;
	color: rgba(255, 255, 255, .95); font-family: 'cwTeXHei'; font-size: 20px;
	text-shadow: -1px -1px rgba(0, 0, 0, .65), -1px 1px rgba(0, 0, 0, .65), 1px -1px rgba(0, 0, 0, .65), 1px 1px rgba(0, 0, 0, .65), 1px 1px rgba(0, 0, 0, .65);
}

.ep-wrapper .ep-text .description { line-height: 36px; }

.ep-wrapper .ep-text .description.fi { -webkit-animation: slideInRight 2500ms; animation: slideInRight 2500ms; }
.ep-wrapper .ep-text .description.se { -webkit-animation: slideInLeft 2500ms; animation: slideInLeft 2500ms; }

.ep-wrapper .ep-text .hbut {
	margin: 50px 0 0 0; padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, .85);
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, .65), -1px -1px 1px 0px rgba(0, 0, 0, .65), 1px 1px 1px 0px rgba(0, 0, 0, .65) inset, -1px -1px 1px 0px rgba(0, 0, 0, .65) inset;
	border-radius: 3px;
	letter-spacing: 5px;
	-webkit-animation: bounceInUp 3000ms; animation: bounceInUp 3000ms;
}



@media screen and (min-width: 1px) and (max-width: 480px) {
	.ep-wrapper { margin: 20% 0 0 0; }
	.ep-wrapper .ep-counts .ep-numbers { font-size: 80px; }
	.ep-wrapper .ep-text { font-size: 18px; }
}




/*============================================================================*/