@charset "utf-8";
@import url('../../../_bk_plugin_css/gFontEN/StardosStencil.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-window-main {
	z-index: 3; display: flex; justify-content: center; align-items: center; flex-direction: column; position: fixed; top: calc(100% / 2 - 90px); left: 0; right: 0; width: 100vw; max-width: 1920px;
	transform: translate(0, 0);
	-webkit-animation: zoomIn 1000ms; animation: zoomIn 1000ms;
}

.ep-win {
	display: inline-block; width: 500px; height: 100%;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 5px;
	background-color: rgba(0, 0, 0, .35);
}

.ep-title {
	display: inline-block; padding: 20px 30px; width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, .85);
	font-family: 'StardosStencil'; color: rgba(0, 0, 0, .85); font-size: 26px;
	background-color: rgba(255, 255, 255, .85);
}

.ep-contents .ep-text .description {
	display: inline-block; padding: 20px 30px; width: 100%; line-height: 36px;
	color: rgba(255, 255, 255, .85); font-size: 22px;
	text-shadow: -1px -1px rgba(0, 0, 0, .35), -1px 1px rgba(0, 0, 0, .35), 1px -1px rgba(0, 0, 0, .35), 1px 1px rgba(0, 0, 0, .35), 1px 1px rgba(0, 0, 0, .35);
}

.ep-but {
	z-index: 3; display: flex; justify-content: center; position: fixed; bottom: 10%; left: 0; right: 0; width: 100vw; max-width: 1920px;
	transform: translate(0, 0);
	-webkit-animation: bounceInUp 1500ms; animation: bounceInUp 1500ms;
}
.ep-but .hbut {
	padding: 15px 10px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 5px;
	color: rgba(255, 255, 255, .85); font-size: 20px;
	text-shadow: -1px -1px rgba(0, 0, 0, .35), -1px 1px rgba(0, 0, 0, .35), 1px -1px rgba(0, 0, 0, .35), 1px 1px rgba(0, 0, 0, .35), 1px 1px rgba(0, 0, 0, .35);
}

/*----------------------------------------------------------------------------*/

.police-tape {
	padding: 15px; text-align: center; white-space: nowrap;
	font-family: 'StardosStencil'; font-size: 30px;
	background-color: #e2bb2d;
	background: linear-gradient(180deg, #eed887 0%, #e2bb2d 5%, #e2bb2d 90%, #e5c243 95%, #0e0b02 100%);
}

.police-tape--1 {
	z-index: 1; position: absolute; top: 40%; left: -5%;right: -5%; margin-top: 0;
	transform: rotate(10deg);
}

.police-tape--2 {
	z-index: 2; position: absolute; top: 50%; left: -5%; right: -5%;
	transform: rotate(-8deg);
}


.police-tape--1 > span:nth-child(1)  { margin: 0px; }
.police-tape--1 > span:nth-child(2)  { margin: 0 0 0 20px; }
.police-tape--1 > span:nth-child(3)  { margin: 0 0 0 50px; }
.police-tape--1 > span:nth-child(4)  { margin: 0 0 0 20px; }
.police-tape--1 > span:nth-child(5)  { margin: 0 0 0 50px; }
.police-tape--1 > span:nth-child(6)  { margin: 0 0 0 20px; }
.police-tape--1 > span:nth-child(7)  { margin: 0 0 0 50px; }
.police-tape--1 > span:nth-child(8)  { margin: 0 0 0 20px; }

.police-tape--2 > span:nth-child(1)  { margin: 0px; }
.police-tape--2 > span:nth-child(2)  { margin: 0 0 0 50px; }
.police-tape--2 > span:nth-child(3)  { margin: 0 0 0 20px; }
.police-tape--2 > span:nth-child(4)  { margin: 0 0 0 50px; }
.police-tape--2 > span:nth-child(5)  { margin: 0 0 0 20px; }
.police-tape--2 > span:nth-child(6)  { margin: 0 0 0 50px; }
.police-tape--2 > span:nth-child(7)  { margin: 0 0 0 20px; }
.police-tape--2 > span:nth-child(8)  { margin: 0 0 0 50px; }


@media screen and (min-width: 1px) and (max-width: 640px) {
	.ep-window-main { top: calc(100% / 2 - 150px); }
	.ep-win { width: 300px; }
	.ep-title { font-size: 22px; }
	.ep-contents .ep-text .description { font-size: 20px; }
	.ep-but .hbut { font-size: 18px; }
	.police-tape--1 { transform: rotate(15deg); }
	.police-tape--2 { transform: rotate(-16deg); }
}


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