@charset "utf-8";
/* CSS Document */

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

html, body {
    -webkit-user-select: none;
    height: 100%;
    width: 100%;
	margin: 0;
	padding: 0;
    -webkit-text-size-adjust: 100%;
}
.pull-right{
	float:right;
}

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}

img {
    max-width: 100%;
    vertical-align: middle;
}
.hidden{
	display:none;
}

* {
    -webkit-overflow-scrolling: touch; 
  }

body{
	
	overflow: hidden;
}
.stages{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    
}
.stage{

	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display: none;
}
/*loading消失后不会再出现。*/
.stage-loading{
	z-index:3;
	background-image: linear-gradient( 90deg, rgb(144,169,180) 2%, rgb(104,133,146) 100%);
	background-size:100% 100%;
	
}
.stage.active{
	display:block;
}

.main-canvas-container{
	overflow-y:auto;
	overflow-x:hidden;
}
.debug{
	width:50%;
	display:none;
	position:fixed;
	top:0;
	left:0;
	z-index:999;
	background:#FFF;
	overflow:scroll;
	font-size:16px;
	padding:5px;
    
	
}
.debug .error{
	background:red;
	color:#FFF;
}
.mainScene{
	   width:100%;
	vertical-align: middle;
}
.mainSceneContainer{
	height:auto;
}



.btn-music{
	    width: .8rem;
    height: .8rem;
    background: url(http://cdn.molaware.com/wuhandiary/content/image/music.png) no-repeat top center;
    background-size: .8rem 1.6rem;
    position: absolute;
    z-index: 11;
    right: .2rem;
    top: .2rem;
	
}
.btn-music.active{
	background-position-y:-.8rem;
}
.finish-stage{
	
	width:100%;
	position:relative;
	height:100%;
	
}
.final-widget{
	background:url("http://cdn.molaware.com/wuhandiary/content/image/final-widget.png") no-repeat center;
	width:100%;
	height:9.61rem;
	position:absolute;
	top:50%;
	margin-top:-4.805rem;
	left:0;
	background-size:100% 100%;
	
}

.btn-final{
	background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-final.png") no-repeat center;
	background-size:100% 100%;
	width:.71rem;
	height:5.20rem;
	position:absolute;
	left:.52rem;
	top:50%;
	margin-top:-2.6rem;
	
}

.loading-container{
	
	width: 100%;
	
	position:absolute;
	top:30%;
	left:0;
	
	background-size:100% 100%;
}
.stage-loading .loading-bar{
	height: .13rem;
    width: 5.16rem;
   
    margin: .4rem auto .2rem;
    background: rgba(255,255,255,.4);
    border-radius: 3px;
    overflow: hidden;
}

.loading-bar-inner{
	height:100%;
	width:1%;
	background:#ffbb6e;
	
}
.text-progress{
	color:#ffbb6e;
	text-align:center;
	font-size:.3rem;
	letter-spacing: 1px;
  
}
.loading-notebook{
	background:url("http://cdn.molaware.com/wuhandiary/content/image/image-note.png") no-repeat center;
	width: 3.37rem;
	height: 2.53rem;
	margin:0 auto;
	background-size:cover;
}

.stage-loading .loading-text{
	width: 293px;
    height: 20px;
	background:url("http://cdn.molaware.com/wuhandiary/content/image/image-text.png") no-repeat top center;
	background-size:293px 80px;
	margin:.4rem auto 0;
	animation: loadingTextAnimation 9s infinite both;
    display:none;
}
@keyframes loadingTextAnimation{
	0%{
		background-position-y:0;
		opacity:0;
	}
	3%{
		opacity:1;
	}
	22%{
		opacity:1;
	}
	24.999%{
		background-position-y:0;
		opacity:0;
	}
	25%{
		background-position-y:-20px;
	}
	28%{
		opacity:1;
	}
	47%{
		opacity:1;
	}
	49.999%{
		opacity:0;
		background-position-y:-20px;
	}
	50%{
		background-position-y:-40px;
	}
	53%{
		opacity:1;
	}
	72%{
		opacity:1;
	}
	74.999%{
		opacity:0;
		background-position-y:-40px;
	}
	75%{
		background-position-y:-60px;
	}
	78%{
		opacity:1;
	}
	97%{
		opacity:1;
	}
	99.999%{
		opacity:0;
		background-position-y:-60px;
	}
	100%{
		opacity:0;
		background-position-y:0;
	}
}


.comboAnimationContainer{
	 width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    transition:transform 1s;
	
}
.logo{
	background:url("http://cdn.molaware.com/wuhandiary/content/image/image-logo.png") no-repeat center;
	background-size:cover;
	width: 3.13rem;
	height: .8rem;
	position:absolute;
	left:50%;
	bottom:.5rem;
	margin-left:-1.5515rem;
}

.stage.widget-collection{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}
.widget-collection .title{
	background:url("http://cdn.molaware.com/wuhandiary/content/image/image-title.png") no-repeat center;
	background-size:cover;
	width: 6.64rem;
	height: 2.32rem;
	position:absolute;
	left:50%;
	top:1.3rem;
	margin-left:-3.32rem;
	opacity:0;
	transition:all 1s;
}
.widget-collection .title.active{
	top:.4rem;
	opacity:1;
}

.hint-up{
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-up.png") no-repeat center;
    width:3.55rem;
    height: 1.52rem;
    position:absolute;
    bottom:.2rem;
    left:50%;
    margin-left:-1.725rem;
    background-size:cover;
    opacity:0;
}
.widget-collection .hint-up.active{
	animation:shine 1.8s infinite;
}
@keyframes shine{
    0%{opacity:0;}
    30%{opacity:1}
    100%{opacity:1;transform:translateY(-.2rem)}
   
}
#flowerFall{
	transform: rotate(60deg);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
    display:none;
}
.bg-container{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#CDD9DB;
    overflow:hidden;
}



.hud-top {
     position:absolute;
    top:0;
    left:0;
    z-index:2;
    background:url("http://cdn.molaware.com/wuhandiary/content/image/overlay-top-trans.png") no-repeat center;
    background-size: cover;
    width: 100%;
    height:4rem;
    
    display:none;
    
}

.hud-bottom {
   position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    background:url("http://cdn.molaware.com/wuhandiary/content/image/overlay-bottom-trans.png") no-repeat center;
    background-size: cover;
    width: 100%;
    height:4rem;
     display:none;
}
.hud .text{
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    position:absolute;
    top:1rem;
    left:50%;
    width: 6.4rem;
    height: 1.32rem;
    margin-left:-3.2rem;
    display:none;
}
.text-1-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/texts/text-1-1.png");
}
.text-2-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/texts/text-2-1.png");
}
.text-3-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/texts/text-3-1.png");
}
.text-4-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/texts/text-4-1.png");
}

.text-5-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/texts/text-5-1.png");
}

.text-6-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/texts/text-6-1.png");
}
.hud .p-title{
        background-repeat: no-repeat;
    background-position: top;
    background-size: 100% auto;
    position: absolute;
    
    bottom: 0.6rem;
    left: .5rem;
    display:none;
}
.hud .title-1-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/title/title-1-1.png");
    width: 5.29rem;
    height: 1.09rem;
    bottom: 1.5rem;
    
}
.hud .title-2-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/title/title-2-1.png");
    width: 5.29rem;
    height: 1.09rem;
    bottom: 1.5rem;
}
.hud .title-3-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/title/title-3-1.png");
    width: 6.36rem;
    height: 1.60rem;
    bottom: 1.4rem;
}
.hud .title-3-1 .btn-open-diary{
    margin-top: 1.8rem;
}
.hud .title-4-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/title/title-4-1.png");
    width: 5.29rem;
    height: 1.09rem;
    bottom: 1.5rem;
}
.hud .title-5-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/title/title-5-1.png");
   
    width: 6.8rem;
    height: 1.01rem;
     bottom: 1.5rem;
    
}
.hud .title-6-1 {
    background-image:url("http://cdn.molaware.com/wuhandiary/content/image/title/title-6-1.png");
    width: 2.09rem;
    height: 1.09rem;
    bottom: 1.5rem;
}
.btn-open-diary{
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-open.png") no-repeat center;
    background-size:cover;
    width: 2.52rem;
    height: .97rem;
    margin-top: 1.4rem;
}

.notebook-container{
    background:url("http://cdn.molaware.com/wuhandiary/content/image/image-notebook.png") no-repeat top center;
    width: 7.5rem;
    height: 0;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-6.46rem;
    margin-left:-3.75rem;
    background-size:100% auto;
    transform:translateY(20px);
    opacity:0;
    transition:opacity .4s,transform .4s;
    font-size: .25rem;
    line-height: 1.8em;
}
.notebook-container.active{
    height: 11.92rem;
    transform:translateY(0);
    opacity:1;
}
.notebook-container .article{
    display:none;
}
.notebook-container .article.active{
    display:block;
}
.notebook-container .title-img{
    width:5.5rem;
    margin-left:-.5rem;
    margin-top:-.28rem;
    max-width:inherit;
    height:3.08rem;
    display:block;
    margin-bottom: .3rem;
}
.notebook-container p{
    margin:.1rem auto;
    text-indent: 2em;
}
.notebook-container p.no{
    text-indent: 0;
}

.overlay-noflick {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100% ;
    height:100%;
    background:rgba(0,0,0,.5);
    z-index:3;
    display:none;
}
.scaleup{
    transform:scale3d(1.2,1.2,1);
   
}
.btn-close-diary{
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-close.png") no-repeat center;
    width: 2.52rem;
    height: .97rem;;
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-1.26rem;
    background-size:cover;
}
.diary-content {
    position: absolute;
    top: 2rem;
    left: 1rem;
    width: 4.5rem;
    height: 6.7rem;
    
}
.diary-content .page{
    display:none;
}
.diary-content .page.active{
    display:block;
}
.pager {
    position:absolute;
    bottom:2.2rem;
    left: 1rem;
    width: 4.5rem;
    height: .5rem;
}

.to-pre {
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-previous.png") no-repeat center;
    background-size:100% auto;
    width:.84rem;
    height:.5rem;
    
    position:absolute;
    left:0;
    top:0;
    display:none;
}

.to-next {
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-next.png") no-repeat center;
    background-size:100% auto;
    width:.84rem;
    height:.5rem;
    position:absolute;
    right:0;
    top:0;
    display:none;
}

.bg-out {
    background:url("http://cdn.molaware.com/wuhandiary/content/image/bg-out.jpg") no-repeat center;
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
}
.btn-final-group{
    position:absolute;
    left:0;
    bottom:.3rem;
    width:100%;
    text-align:center;
    display:none;
    z-index:2;
}
.btn-replay{
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-replay.png") no-repeat center;
    background-size:cover;
    width: 2.52rem;
    height: .97rem;
    display:inline-block;
    margin-right:.5rem;
}
.btn-share{
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-share.png") no-repeat center;
    background-size:cover;
    width: 2.52rem;
    height: .97rem;
    display:inline-block;
}

.logo-final {
    background:url("http://cdn.molaware.com/wuhandiary/content/image/image-logo.png") no-repeat center;
    background-size:cover;
    width:2.504rem;
    height:.64rem;
    position:absolute;
    left:.32rem;
    top:.32rem;
    display:none;
}

.share {
    background:url("http://cdn.molaware.com/wuhandiary/content/image/share.png") no-repeat center;
    width:4.16rem;
    height:1.99rem;
    background-size:cover;
    position:absolute;
    right:.35rem;
    top:.35rem;
}

.overlay-dark {
    position:fixed;
    top:0;
    left:0;
    z-index:99999;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.8);
    display:none;
}
.overlay-light {
    position:absolute;
    top:0;
    left:0;
    z-index:99999;
    width:100%;
    height:100%;
    background:#FFF;
    display:none;
}
.btn-up {
    background:url("http://cdn.molaware.com/wuhandiary/content/image/btn-up-2.png") no-repeat center;
    background-size:cover;
    width:2.56rem;
    height:1.82rem;
    left:50%;
    margin-left:-1.28rem;
    position:absolute;
    bottom:1rem;
    opacity:0;
}
.btn-up.active{
	animation:shine 1.8s infinite;
}
@keyframes shine{
    0%{opacity:0;}
    30%{opacity:1}
    100%{opacity:1;transform:translateY(-.2rem)}
   
}