/* ****************************************************

	Style for TOP
	/top/css/style.css

	- start-main
	- opening-fla
	- movie
	- main
	- gnav
	- sns
	- parts
	- footer
	- bg video

***************************************************** */


/* contents
***************************************************** */

html {
	overflow-x: auto;
	overflow-x: hidden;
	overflow-y: hidden;
}
body {
	overflow-x: hidden;
	background: #090b18;
	background: #000000;
	min-width: 960px;
}
.page-wrap {
	position: relative;
	margin: 0 auto;
	width: 960px;
}


/* start-main
***************************************************** */

.start-contents-area {
	display: none;
	height: 100%;
}
.start-main-area {
	position: absolute;
	width: 654px;
	height: 407px;
	top: 50%;
	left: 50%;
	margin-left: -327px;
	margin-top: -203px;
	text-align: center;
	z-index: 11;
}
.monitor {
	position: relative;
	margin: 0 auto;
	width: 654px;
	height: 407px;
	background: url(../img/bg_monitor.png) no-repeat left top;
}
.arm {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 60px;
	margin-top: -450px;
	z-index: 9;
}
.center-logo {
	position: absolute;
	top: 118px;
	left: 268px;
	text-align: center;
	opacity: 1;
	display: none\0/; /* for IE8 */
}
.loading {
	position: absolute;
	top: 166px;
	left: 361px;
	width: 132px;
	height: 67px;
	background: url(../img/bg_loading.png) no-repeat left top;
	opacity: 1;
}
	.loading .loadbar {
		position: absolute;
		top: 0;
		left: -37px;
		width: 361px;
		height: 12px;
		background: url(../img/bg_loading.png) no-repeat left top;
	}
		.loading .loadbar .progress {
			margin: 4px auto 0;
			height: 4px;
			width: 0;
			background: linear-gradient(to bottom, #99b7cf, #ffffff 50%, #99b7cf);
			background: -webkit-gradient(linear, left top, right topcolor-stop(0%, #99b7cf), color-stop(50%, #ffffff), color-stop(100%, #99b7cf));
			background: -webkit-linear-gradient(left, #99b7cf, #ffffff 50%, #99b7cf);
			background: -moz-linear-gradient(left center , #99b7cf, #ffffff 50%, #99b7cf) repeat scroll 0 0 rgba(0, 0, 0, 0);
		}

.loading-logo {
	position: absolute;
	top: 227px;
	left: 245px;
	width: 133px;
	height: 58px;
	background: url(../../common/img/parts_loading.png) no-repeat left top;
}
.anm-lead-loading {
	-webkit-animation: loading_play 2s steps(12) infinite;
	-moz-animation: loading_play 2s steps(12) infinite;
	animation: loading_play 2s steps(12) infinite;
}
@-webkit-keyframes loading_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -696px; }
}
@-moz-keyframes loading_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -696px; }
}
@keyframes loading_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -696px; }
}

.loading ul {
	position: relative;
}

.loading li {
	position: absolute;
	bottom: 0;
}
.loading #loadtxt {
	left: 50px;
}
.loading #load1 {
	left: 68px;
	top: 12px;
}
.loading #load2 {
	left: 78px;
	top: 12px;
}
.loading #load3 {
	left: 88px;
	top: 12px;
}
.loading #load_percent {
	left: 190px;
}

.btn-start {
	display: none;
	position: absolute;
	margin-top: 30px;
	top: 50%;
	width: 654px;
	text-align: center;
	opacity: 0;
	display: none\0/; /* for IE8 */
}


/* opening-fla
***************************************************** */

.opening-fla {
	position: relative;
	height: 100%;
	opacity: 1;
}
	.opening-fla .opening-loading {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 16px;
		/*background: url(../img/parts_loading.gif) no-repeat;*/
	}


/* movie
***************************************************** */

.bg-movie {
	position: fixed;
	top: 50%;
	left: 50%;
	display: none;
	overflow: hidden;
	margin-top: -568px;
	margin-left: -710px;
	width: 1420px;
	height: 1136px;
	opacity: 0;
}
	.bg-movie .bg-wrap {
		position: relative;
		width: 100%;
		height: 100%;
	}
	.ipad .bg-movie .bg-wrap {
		/*background: url(../img/bg_ipad_0.jpg) no-repeat center center;*/
	}
		.bg-movie .switch1, .bg-movie .switch2, .bg-movie .switch3,
		.bg-movie .switch4, .bg-movie .switch5, .bg-movie .switch6 {
			opacity: 0;
			overflow: hidden;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -800px;
			margin-top: -628px;
		}
		.ipad .bg-movie .switch1, .ipad .bg-movie .switch2, .ipad .bg-movie .switch3,
		.ipad .bg-movie .switch4, .ipad .bg-movie .switch5, .ipad .bg-movie .switch6 {
			margin-left: -512px;
			margin-top: -336px;
		}
		.bg-movie video {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -710px;
			margin-top: -568px;
			width: 1420px;
			height: 1136px;
		}
		.bg-movie .video2, .bg-movie .video3, .bg-movie .video4,
		.bg-movie .video5, .bg-movie .video6 {
			display: none;
		}
		.ipad .bg-movie .switch1 { background: url(../img/bg_zaku_ipad.jpg) no-repeat center center; }
		.ipad .bg-movie .switch2 { background: url(../img/bg_dom_ipad.jpg) no-repeat center center; }
		.ipad .bg-movie .switch3 { background: url(../img/bg_gergoog_ipad.jpg) no-repeat center center; }
		.ipad .bg-movie .switch4 { background: url(../img/bg_elmeth_ipad.jpg) no-repeat center center; }
		.ipad .bg-movie .switch5 { background: url(../img/bg_zeong_ipad.jpg) no-repeat center center; }


/* main
***************************************************** */

.bg-main {
	display: none;
	position: relative;
	height: 100%;
}
	.bg-main02 {
		position: relative;
		height: 100%;
	}
.bg-frame {
	background: url(../img/bg_frame.png) no-repeat center center;
}
.bg-light {
	background: url(../img/bg_light.png) no-repeat center center;
}
.contents-area {
	display: none;
	height: 100%;
}
.main-area {
	position: absolute;
	width: 634px;
	height: 536px; /* 478px + 58px */
	top: 50%;
	left: 50%;
	margin-left: -317px;
	margin-top: -270px;
	text-align: center;
	z-index: 11;
}


/* gnav
***************************************************** */

.gnav01 {
	display: none;
	position: absolute;
	width: 332px;
	height: 584px;
	top: 50%;
	left: 50%;
	margin-left: -728px;
	margin-top: -512px;
	z-index: 12;
}

.gnav02 {
/*	display: none;*/
	position: absolute;
	height: 73px;
	width: 1900px;
	top: -73px;
	margin-left: -440px;
	z-index: 12;
}
	.gnav02 .gnav02-wrap {
		background: url(../../common/img/bg_gnavt.png) repeat-x top;
	}
		.gnav02 .gnav02-wrap ul {
			margin: 0 auto;
			width: 944px;
		}
			.gnav02 .gnav02-wrap li {
				float: left;
				height: 73px;
			}
			.gnav02 .gnav02-wrap .gnavt-home {
				width: 121px;
			}
			.gnav02 .gnav02-wrap .gnavt-gameflow {
				width: 197px;
			}
			.gnav02 .gnav02-wrap .gnavt-movie {
				width: 206px;
			}
			.gnav02 .gnav02-wrap .gnavt-spec {
				width: 216px;
			}
			.gnav02 .gnav02-wrap .gnavt-event {
				width: 204px;
			}


/* sns
***************************************************** */

.sns-area {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: 425px;
	margin-top: -315px;
	z-index: 12;
}


/* parts
***************************************************** */

.logo {
	display: none;
	position: fixed;
	bottom: 64px;
	left: 50%;
	margin-left: -475px;
	z-index: 12;
}
.pht_meter_top {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -340px;
	margin-top: -252px;
	width: 680px;
	height: 110px;
	background: url(../img/pht_meter_top.png) no-repeat;
}
.anm_pht_meter_top {
	-webkit-animation: meter_top_play 5s steps(60) infinite;
	-moz-animation: meter_top_play 5s steps(60) infinite;
	animation: meter_top_play 5s steps(60) infinite;
}

@-webkit-keyframes meter_top_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -6600px; }
}
@-moz-keyframes meter_top_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -6600px; }
}
@keyframes meter_top_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -6600px; }
}
.pht_meter_right {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: 173px;
	margin-top: -192px;
	width: 164px;
	height: 362px;
	background: url(../img/pht_meter_right.png) no-repeat;
}
.anm_pht_meter_right {
	-webkit-animation: meter_right_play 5s steps(60) infinite;
	-moz-animation: meter_right_play 5s steps(60) infinite;
	animation: meter_right_play 5s steps(60) infinite;
}

@-webkit-keyframes meter_right_play {
	0% { background-position:   0 0; }
	100% { background-position: -9840px 0; }
}
@-moz-keyframes meter_right_play {
	0% { background-position:   0 0; }
	100% { background-position: -9840px 0; }
}
@keyframes meter_right_play {
	0% { background-position:   0 0; }
	100% { background-position: -9840px 0; }
}
.pht_meter_bottom {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -340px;
	margin-top: 146px;
	width: 680px;
	height: 110px;
	background: url(../img/pht_meter_bottom.png) no-repeat;
}
.anm_pht_meter_bottom {
	-webkit-animation: meter_bottom_play 5s steps(60) infinite;
	-moz-animation: meter_bottom_play 5s steps(60) infinite;
	animation: meter_bottom_play 5s steps(60) infinite;
}

@-webkit-keyframes meter_bottom_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -6600px; }
}
@-moz-keyframes meter_bottom_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -6600px; }
}
@keyframes meter_bottom_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -6600px; }
}

.pht_meter_left {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -346px;
	margin-top: -192px;
	width: 171px;
	height: 362px;
	background: url(../img/pht_meter_left.png) no-repeat;
}

.anm_pht_meter_left {
	-webkit-animation: meter_left_play 5s steps(75) infinite;
	-moz-animation: meter_left_play 5s steps(75) infinite;
	animation: meter_left_play 5s steps(75) infinite;
}

@-webkit-keyframes meter_left_play {
	0% { background-position:   0 0; }
	100% { background-position: -12825px 0; }
}
@-moz-keyframes meter_left_play {
	0% { background-position:   0 0; }
	100% { background-position: -12825px 0; }
}
@keyframes meter_left_play {
	0% { background-position:   0 0; }
	100% { background-position: -12825px 0; }
}

.pht_meter_center {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -182px;
	margin-top: -160px;
	width: 355px;
	height: 306px;
	background: url(../img/pht_meter_center.png) no-repeat;
}
.anm_pht_meter_center {
	-webkit-animation: meter_center_play 5s steps(90) infinite;
	-moz-animation: meter_center_play 5s steps(90) infinite;
	animation: meter_center_play 5s steps(90) infinite;
}

@-webkit-keyframes meter_center_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -27450px; }
}
@-moz-keyframes meter_center_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -27450px; }
}
@keyframes meter_center_play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -27450px; }
}

.pht_meter_circle {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: 371px;
	margin-top: -549px;
}
.pht_panel {
	display: none;
	overflow: hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -258px;
	margin-top: 263px;
	width: 516px;
	height: 200px;
	background: url(../img/pht_panel.png) no-repeat;
}
.anm_pht_panel {
	-webkit-animation: play 70s steps(14) infinite;
	-moz-animation: play 70s steps(14) infinite;
	animation: play 70s steps(14) infinite;
}

@-webkit-keyframes play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -2800px; }
}
@-moz-keyframes play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -2800px; }
}
@keyframes play {
	0% { background-position:   0 0; }
	100% { background-position: 0 -2800px; }
}
.pht_monitor_topleft {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -258px;
	margin-top: -485px;
}
.pht_monitor_topright {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: 24px;
	margin-top: -485px;
}
.pht_barcode {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -300px;
	margin-top: 255px;
}


/* footer
***************************************************** */

.footer-area {
	position: fixed;
	bottom: 0;
	border-top: 1px solid #252733;
	width: 100%;
	height: 58px;
	background: url(../../common/img/bg_footer.png) repeat-x bottom;
	z-index: 12;
}
	.footer-area .footer-left {
		float: left;
		width: 450px;
	}
		.footer-area .footer-left li {
			float: left;
		}
		.footer-area .footer-left li.bisty {
			margin-right: 7px;
		}
		.footer-area .footer-left li.copywrite {
			margin-right: 27px;
		}
		.footer-area .footer-left li.degitalguide {
			padding-top: 15px;
			margin-right: 5px;
		}
		.footer-area .footer-left li.pawaslo {
			padding-top: 15px;
		}
	.footer-area .footer-right {
		float: right;
		margin-right: 10px;
		width: 330px;
	}
		.footer-area .footer-right li {
			float: right;
		}
		.footer-area .footer-right li.twitter {
			width: 110px;
			padding-top: 20px;
		}
			#twitter-widget-0 {
				width: 100px !important;
			}
		.footer-area .footer-right li.facebook {
			width: 120px;
			height: 22px;
			padding-top: 20px;
			overflow: hidden;
		}


/* bg video
***************************************************** */

/* overwrite */
.mejs-container .mejs-controls { display: none !important; }
.mejs-overlay-button { display: none !important; }