@charset "utf-8";
@import url('../../../_bk_plugin_css/gFontEN/Iceland.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: -1; 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(../img/bg.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; flex-direction: row; justify-content: space-between; align-content: center; }

.ep-number {
	line-height: 1;
	color: rgba(255, 255, 255, .99); font-family: 'Iceland'; font-size: 200px; font-weight: 500;
	text-shadow: -1px -1px rgba(1, 140, 190, .65), -1px 1px rgba(1, 140, 190, .65), 1px -1px rgba(1, 140, 190, .65), 1px 1px rgba(1, 140, 190, .65), 1px 1px rgba(1, 140, 190, .65);
}

.ep-wrapper .fi { -webkit-animation: bounceInUp 1500ms; animation: bounceInUp 1500ms; }
.ep-wrapper .se { -webkit-animation: bounceInDown 1500ms; animation: bounceInDown 1500ms; }


.ep-atnmain { position: relative; margin: 0 30px; width: 200px; }

.ep-atnmain .hole {
	position: absolute; bottom: 0; left: 0; width: 200px; height: 190px;
	border-radius: 100%;
	background-color: #01579b;
}

.ep-atnmain .objmain {
	position: absolute; bottom: 5px; left: 50%; width: 200px; height: 205px;
	border-radius: 0 0 50% 50%;
	overflow: hidden;
	transform: translateX(-50%);
}

.ep-atnmain .objmain .objmain-out {
	position: absolute; bottom: -10px; left: 50%; width: 150px; height: 210px;
	border: 4px solid #01579b;
	border-radius: 15px;
	background-color: white;
	transform: translateX(-50%);
}
/*
.ep-atnmain .objmain .objmain-out::before {
	content: "";
	position: absolute; top: -9px; right: -13px; width: 23px; height: 16px;
	border-bottom: #01579b 4px solid;
	background-color: white;
	transform: rotate(48deg);
}
*/
.ep-atnmain .objmain .objmain-out .objmain-face { position: relative; margin: 50px 0 0 0; }

.ep-atnmain .objmain .objmain-out .objmain-face .vline span {
	position: absolute; width: 2px; height: 10px; top: 0px; left: 5px;
	background-color: #01579b;
}

.ep-atnmain .objmain .objmain-out .objmain-face .vline span:nth-child(1) {
	height: 40px; top: -50px; left: 15px;
}
.ep-atnmain .objmain .objmain-out .objmain-face .vline span:nth-child(2) {
	height: 35px; top: -50px; left: 25px;
}
.ep-atnmain .objmain .objmain-out .objmain-face .vline span:nth-child(3) {
	height: 30px; top: -50px; left: 35px;
}

.ep-atnmain .objmain .objmain-out .objmain-face .eyes { position: absolute; top: 0; left: 50px; width: 70px; height: 15px; }

.ep-atnmain .objmain .objmain-out .objmain-face .eyes .eye {
	position: absolute; bottom: 0; width: 13px; height: 15px;
	border-radius: 100%;
	background-color: #01579b;
	animation-name: ep-atn-eye;
	animation-duration: 2500ms;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

.ep-atnmain .objmain .objmain-out .objmain-face .eyes .eye-left { left: 0; }

.ep-atnmain .objmain .objmain-out .objmain-face .eyes .eye-right { right: 0; }

@keyframes ep-atn-eye {
	0% { height: 15px; }
	50% { height: 15px; }
	52% { height: 1px; }
	56% { height: 15px; }
	100% { height: 15px; }
}

.ep-atnmain .objmain .objmain-out .objmain-face .blush {
	position: absolute; top: 35px;
	width: 15px;
	height: 3px;
	border-radius: 100%;
	background-color: #fdabaf;
}

.ep-atnmain .objmain .objmain-out .objmain-face .blush-lt { left: 40px; }

.ep-atnmain .objmain .objmain-out .objmain-face .blush-rt { right: 12px; }

.ep-atnmain .objmain .objmain-out .objmain-face .mouth {
	position: absolute; top: 70px; left: calc(100% / 2 + 15px); width: 20px; height: 3px;
	border-radius: 3px;
	background-color: #01579b;
	transform: translateX(-50%);
}



.ep-text { display: flex; flex-direction: column; justify-content: center; position: absolute; bottom: 100px; left: 0; right: 0; text-align: center; }

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

.ep-text .description.tfi { -webkit-animation: zoomInLeft 2000ms; animation: zoomInLeft 2000ms; }
.ep-text .description.tse { -webkit-animation: zoomInRight 2000ms; animation: zoomInRight 2000ms; }

.ep-text .description,
.ep-text .hbut {
	color: rgba(255, 255, 255, .99); font-size: 26px;
	text-shadow: -1px -1px rgba(1, 140, 190, .85), -1px 1px rgba(1, 140, 190, .85), 1px -1px rgba(1, 140, 190, .85), 1px 1px rgba(1, 140, 190, .85), 1px 1px rgba(1, 140, 190, .85);
}

.ep-text .hbut {
	display: flex; justify-content: center; margin: 30px auto 0 auto; padding: 10px 15px; width: 100vw; max-width: 150px; text-align: center;
	/*border: 1px solid rgba(255, 255, 255, .85);*/
	box-shadow: 1px 1px 3px 0px rgba(255, 255, 255, 05), -1px -1px 3px 0px rgba(3, 155, 229, .85) inset;
	border-radius: 8px;
	font-size: 20px; letter-spacing: 3px;
	-webkit-animation: lightSpeedIn 1500ms; animation: lightSpeedIn 1500ms;
}



@media screen and (min-width: 1px) and (max-width: 640px) {
	
.ep-number { font-size: 120px; }
.ep-atnmain { width: 150px; }
.ep-atnmain .hole { width: 150px; height: 140px; }

.ep-atnmain .objmain { width: 150px; height: 195px; }

.ep-atnmain .objmain .objmain-out { width: 120px; height: 160px; }

.ep-atnmain .objmain .objmain-out .objmain-face .eyes { left: 35px; }

.ep-text .description,
.ep-text .hbut { font-size: 18px; }

.ep-text .hbut { font-size: 16px; }

	
}




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