@font-face {
	font-family: 'segoe';
	src: url('/statics/seguibl.ttf');
}

body {
	background-color: #000000;
	margin: 0;
}
.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {
	user-select: none; -moz-user-select: none;
	position: relative;
	z-index: 1;
}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('Logo_620.png') no-repeat center / contain; width: 620px; height: 419px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 190px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}

#policeGirl {
	background: url('/statics/email/police_girl.png') no-repeat center;
	width: 1280px;
	height: 720px;
	display: none;
}
#gameContainer {
	overflow: hidden;
}
#gameContainer canvas {
	position: absolute;
	overflow: hidden;
}

.webview_close_btn {
	position: absolute;
	width: 60px;
	height: 60px;
	margin-left: -40px;
	margin-top: -20px;
	border-radius: 50%;
	font-size: 36px;
	line-height: 36px;
	text-align: center;
	font-family: Arial, Tahoma, sans-serif;
	cursor: pointer;
	border: 2px solid #000000;
    box-shadow: 0 5px 0 rgba(28, 0, 0, 0.6), inset 0 -5px 0 #b94911, inset 0 2px 0 #ffc516;
    background-image: linear-gradient(to bottom, #ff5400 0%, #ffab18 100%);
}
.webview_close_btn:hover {
	color: red;
}

.footer {
	color: white;
}
.footer a {
	margin-top: 120px;
	display: inline-block;
	font-size: 14px;
	font-family: 'segoe', Arial, Tahoma, sans-serif;
	text-decoration: none;
	color: white;
	text-shadow: 1px 1px 0 black, -1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black;
}
.company-info {
	background-image: url('/statics/ToS_address.png');
	width: 310px;
	height: 30px;
}

@keyframes rotate_carrot {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    50% { transform: rotate(20deg); }
    75% { transform: rotate(-8deg); }
    100% { transform: rotate(0deg); }
}
.loading-anim {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 50px;
    width: 85px;
    max-width: 135px;
    transform: translate(-50%, -50%);
    z-index: 15;

}
.loading-anim>img {
    width: 100%;
    display: block; margin: 0 auto;
    animation: rotate_carrot 500ms linear 0s infinite normal;
}
.disabled-mouse {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;
}
.webviewContainer {
	overflow:hidden;
	position:relative;
	width:100%;
	height:100%;
	/*top:-100%;*/
	pointer-events:none;
}

.mobile-content {
	display: none;
	background-image: linear-gradient(-45deg, #6b0075 0%, #6b0075 25%, #271d45 75%, #271634 100%);
	overflow-x: hidden;
	min-height: 100vh;
}

body.mobile .webgl-content {
	display: none;
}

body.mobile .mobile-content {
	display: block;
}

body.mobile, body.mobile.promo {
	background: none;
	margin: 0;
	padding: 0;
}


.mobile-content h1{
	font-size: 0;
	line-height: 0;
	width: 70%;
	margin: 0 auto;
}
.mobile-content h1 img{
	width: 100%;
}

.mobile-content p {
	width: 419px;
	/*height: 60px;*/
	border: 2px solid #ff007e;
	background-image: linear-gradient(to bottom, #ffaa07 0%, #ffffff 49%, #e88e2e 54%, #ffdd66 99%, #ffdd66 100%);
	background-clip: text;
	text-shadow: 0 0 24px rgba(255, 0, 108, 0.6);
	color: #ffffff;
	font-family: "segoe";
	font-size: 83px;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	font-variant: small-caps;
	letter-spacing: 3.6px;
}
.mobile-content p small{
	font-size: 58px;
	font-style: italic;
	font-variant: small-caps;
	letter-spacing: 2.52px;
}

.cta-box {
	background: url('/statics/mobile/cta_box_back_2.png') no-repeat;
	background-size: cover;
	background-position-x: -5vw;
	padding: 5vh 5vw 5vh 2vw;
	position: relative;
	z-index: 1;
	margin-top: 5vh;
	margin-bottom: 6vh;
	width: 100vw;
}
.cta-box-image {
	position: absolute;
	z-index: 2;
	background: url('/statics/mobile/mobile_mizuki.png') no-repeat;
	background-size: cover;
	width: 50vw;
	height: 78vh;
	top: -6vh;
	right: 5vw;
}
.cta-box span{
	overflow: hidden;
	text-indent: -1000em;
	display: block;
	background-size: contain;
}
.cta-box-text {
	margin-top: 5vh;
	width: 50vw
}

.txt-clickme {
	background: url('/statics/mobile/txt_clickme.png') no-repeat center 0;
	height: 5vmax;
}
.txt-onyour {
	background: url('/statics/mobile/txt_onyour.png') no-repeat center 0;
	height: 3.6vmax;
    margin-top: -1vmax;
    margin-bottom: -1vmax;
}
.txt-desktop {
	background: url('/statics/mobile/txt_desktop.png') no-repeat center 0;
	height: 5vmax;
}