//http://static.arkr.smartapi.cn/suntory.arkrdigital.com/q3

html {
	overflow: hidden;
	-ms-touch-action: manipulation;
    touch-action: manipulation;
}
html, body {
	height: 100 % !important;
}
body {
	margin: 0px;
	padding: 0px;
	font-family: serif;
	letter-spacing: 3px;
	visibility: hidden;
}

* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a {text-decoration: none }

#horizontal-notice {
	position: absolute; visibility: hidden;
	left: 0; top: 0;
	width: 640px; height: 100%;
	background-size: 180px 246px;
	background-position: center;
	background-repeat: no-repeat;
	background-color: rgba(0,0,0,0.8);
	background-image: url(../_img/global/horizontal-notice.png);
	z-index: 1000000;
}

#campaign-info {
	position: fixed;
	width: 100%; height: 0; left: 0; top: 0; z-index: 10;
	background: url(../_img/global/bg-pattern.jpg) repeat repeat; 
	z-index: 500; visibility: hidden;
}

#campaign-info > #light {
	width: 100%; height: 100%; opacity: 0.5;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url(../_img/global/light-cover.png);
}

#txt-container {
	position: fixed; margin: 155px auto 100px;
	top: 0; right: 0; left: 0;
	width: 540px; height: 85%;
	overflow-x: hidden; overflow-y: hidden;
	visibility: hidden;
}

#info-txt {
	position: absolute; 
	left: 0; right: 0; top: 0;
	width: 550px; height: 2091px;
	background: url(../_img/global/campaign-info-txt-new1.png) no-repeat;
}

@media screen and (min-aspect-ratio: 13/9) {#horizontal-notice {visibility: visible; } }
@media screen and (max-aspect-ratio: 13/9) {#horizontal-notice {visibility: hidden; } }

#contrler {
	position: fixed;
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0.1);
	visibility: hidden;
}

.btn {cursor: pointer; }

#wrap-bg {
	position: fixed; width: 100%; height: 100%;
	background: url(../_img/global/bg-pattern.jpg) repeat repeat; 
	z-index: 10;
}

#wrap-bg > #light {
	width: 100%; height: 100%; opacity: 0.5;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url(../_img/global/light-cover.png);
}

#logo-suntory {
	position: absolute;
	left: 20px; top: 20px;
	width: 124px; height: 85px;
	background: url(../_img/global/suntory-logo.png) no-repeat;
	z-index: 1000;
}

#btn-gameInfo {
	position: absolute;
	right: 130px; top: 42px;
	width: 86px; height: 55px;
	background-image: url(../_img/global/btn-gameInfo.png);
	z-index: 1000;
}

#btn-sound {
	position: absolute; 
	right: 23px; top: 42px;
	width: 86px; height: 55px;
	background-image: url(../_img/global/btn-sound.png);
	z-index: 1000;
}

#wrap-loading {
	position: absolute;
	margin: auto;
	left: 0; right: 0; top: 0; bottom: 0;
	width: 360px;
	height: 350px;
}

#loading-back {
	padding: 4px; margin-top: 240px;
	left: 0px; top: 240px;
	width: 360px; height: 37px;
	background-color: white;
	box-shadow: 10px 10px 0px rgba(0,0,0,0.4);
}

#loading-progress {
	width: 10%; height: 30px;
	background: url(../_img/global/loading-progress.jpg) repeat repeat;
}

#loading-txt {
	margin: 25px 0px 0px 90px;
	font-size: 34px; color: white;
}

#loading-clock {
	position: absolute;
	margin: auto;
	left: 0; right: 0; bottom: 159px;
	width: 164px;
	height: 201px;
	background-size: 100% 100%;
	background-image: url(../_img/global/loading-clock.png);
}

#loading-clock > div {
	position: absolute;
	left: 78px; top: 50%;
	margin-top: 22px;
}

#loading-clock > div:before {
	display: inline-block; content: '';
	background-color: black;
}

#loading-clock > #hour:before {
	margin-left: -23px; margin-top: -2px;
	width: 28px; height: 7px;
}

#loading-clock > #minute:before {
	margin-left: -34px; margin-top: -2px;
	width: 39px; height: 7px;
}

#smoke {
	position: absolute;
	left: -70px; bottom: 10px;
	width: 77px;
	height: 34px;
	background-image: url(../_img/global/smoke.png);
}

#boy {
	position: absolute;
	left: -300px; bottom: 220px;
	width: 250px; height: 300px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#super {
	position: absolute;
	left: 0px; top: 0px;
	width: 250px; height: 300px;
	background-repeat: no-repeat; opacity: 0;
}

.boy0-r {background-image: url(../_img/global/boys/boy-00.png); }
.boy1-r {background-image: url(../_img/global/boys/boy-10.png); }
.boy0-s {background-image: url(../_img/global/boys/boy-01.png); }
.boy1-s {background-image: url(../_img/global/boys/boy-11.png); }

.superIn {
	-webkit-animation: superInOut 0.3s linear alternate infinite;
	-o-animation: superInOut 0.3s linear alternate infinite;
	animation: superInOut 0.3s linear alternate infinite;
}

@-webkit-keyframes superInOut {
	from {opacity: 0; }
	to {opacity: 1; }
}

/*@-webkit-keyframes superInOut {
	0% { filter:hue-rotate(0deg) brightness(0%); -webkit-filter:hue-rotate(0deg) brightness(0%); }
	100% { filter:hue-rotate(10deg) brightness(300%); -webkit-filter:hue-rotate(10deg) brightness(300%); }
}*/

.btn:after {
	-webkit-animation: btn-after-transfrom 1s infinite;
	-o-animation: btn-after-transfrom 1s infinite;
	animation: btn-after-transfrom 1s infinite;
}

@-webkit-keyframes btn-transform {
	from {top: 62px; }
	50% {top: 57px; }
	100% {top: 62px; }
}

@-webkit-keyframes btn-after-transfrom {
	from {opacity: 0; }
	50% {opacity: 1; }
	100% {opacity: 0; }
}