*{ margin:0; padding:0;}
img{ display:block;}
body{ font:14px/24px \5FAE\8F6F\96C5\9ED1,Helvetica,Arial,sans-serif; background:url(../img/body_bg.jpg);overflow-y: hidden;}

/* = Global
-------------------------------------------------------------- */
#magazine{
	width:1170px; height:658px;
	background:white;
	position:absolute; top:50%; left:50%;
	margin:-410px -600px;
	-webkit-perspective:1300px;
	-moz-perspective:1300px;
	-o-perspective:1300px;
}
#magazine:before{
	content:""; display:block;
	/* width:980px; height:810px; */
	/* background:url(../images/ipad.png) no-repeat; */
	position:absolute; top:-80px; left:-93px;
}
.page{
	width:100%; height:100%;
	position:absolute; top:0; left:0;
}
.column{
	font-size:12px; line-height:18px;
	width:280px; height:430px; padding:9px;
	background:#25282C;
}
.column h1{
	font-size:16px; line-height:24px;
	margin-bottom:18px; padding-top:5px;
	text-align:center;
	color:#FFD306;
}
.column p{
	text-indent:28px;
	margin-bottom:18px;
	color:#DDD;
}
.columnLeft{
	float:left;
}
.columnRight{
	float:right;
}

.maskPage{
	width:50%; height:100%;
	position:absolute; top:0; left:0;
	overflow:hidden;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
}
.maskPage .content{
	position:absolute; top:0;
}
.originLeft{
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	-o-transform-origin:left center;
}
.originRight{
	-webkit-transform-origin: right center;
	-moz-transform-origin: right center;
	-o-transform-origin: right center;
}
#mask1{
	z-index:100;
}
#mask2{
	z-index:102;
}
#mask3{
	z-index:101;
}
#mask3 .content{
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	-o-transform:rotateY(-180deg);
}
.hideLeft .columnLeft{
	display:none;
}

.left50{
	left:50%;
}
.left50 .content{
	left:-100%;
}

#tips{
	width:100px; height:65px;
	line-height:30px; text-align:center;
	/* position:absolute; bottom:60px; left:60px; */
}
#tips .btn{
	width:30px; height:30px;
	/* background:#000; */
	position:absolute;
	cursor:default;
	border-radius:50%;
	top: 50%;
	border:2px solid #FFD306;
}
#tips .top{
	color:#666;
	top:0; left:50%; margin-left:-15px;
}
#tips .down{
	color:#666;
	bottom:0; left:50%; margin-left:-15px;
}
#tips .right{
	color:#FFD306;
	bottom:0; right:10px;
}
#tips .left{
	color:#FFD306;
	/* background:#000; */
	bottom:0; left:10px;
}

/* = Top Bar
-------------------------------------------------------------- */
#topBar{width:90%;height:28px;font:12px/28px \5B8B\4F53,Arial,sans-serif;text-align:center;color:#EEE;text-shadow:0 1px 0 rgba(0,0,0,0.2);background:#000;background:rgba(0,0,0,0.3);border-bottom:1px solid #ccc;border-bottom:1px solid rgba(0,0,0,0.1);position:relative;z-index:9998;padding:0 5%;}
#topBar a{display:block;float:left;margin:0 8px;color:#EEE;text-decoration:none;}
#topBar a:hover{color:#FFF;}
#tbLeft{float:left;}
#tbRight{float:right;}