/*public*/
html,body,address,blockquote,div,dl,form,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul,dd,dt,li,tbody,td,th,thead,tr,button,object,a,abbr,b,em,i,img,samp,span,strong,sub,sup,tt,var,input,select{margin:0;padding:0}
input,button,img,fieldset{border:0;outline:none}
input,select{outline:none}

address,cite,dfn,em,var{font-style:normal}
var{font-family:Georgia,Verdana,Arial}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
a{color:#026acb;text-decoration:none;outline:none}
a:hover{text-decoration:none}
img{width: 100%;height: 100%;}
/* list */
ul,ol{list-style:none}
body{
	overflow:hidden;
	background-color:#fcfcfc;
	padding:0;
	width: 600px;
	height: 100%;
	position: absolute;top: 0;
	left: 0;right: 0;bottom: 0;
	margin: auto;
}

/*music*/
#viose{cursor: pointer;position: fixed;display: inline-block;top: 10px;right: 50%;z-index: 9999;margin-right: -290px;}

/*loading*/
#loading{background:#092940;text-align:center;width:600px;height:100%;z-index:99999;position: absolute;top: 0;left: 0}
#loading_img{position: absolute;width: 30%;left:35%;top: 40%;}
#loading_img img{width: 100%}
#loading_p{position: absolute;top: 120%;width: 100%;left: 0;}
#loading_p p{font-size: 22px;color: #ffffff;line-height: 20px;font-weight: bold;text-align:center;}

.fm_bg{width: 600px;height: 100%;position: absolute;top: 0;left: 0;}
.fm_bg img{height: 100%;}
.flipbook{
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg);/* IE9 */
    -moz-transform:rotate(-7deg);/* Firefox */
    -webkit-transform:rotate(-7deg);/* Safari和Chrome */
    -o-transform:rotate(-7deg);/* Opera */
    opacity: 0;

}

@-webkit-keyframes add_transform {
    0%{
        transform:rotate(-7deg);
	    -ms-transform:rotate(-7deg);/* IE9 */
	    -moz-transform:rotate(-7deg);/* Firefox */
	    -webkit-transform:rotate(-7deg);/* Safari和Chrome */
	    -o-transform:rotate(-7deg);/* Opera */
    }
    100%{
	    transform:rotate(0deg);
	    -ms-transform:rotate(0deg);/* IE9 */
	    -moz-transform:rotate(0deg);/* Firefox */
	    -webkit-transform:rotate(0deg);/* Safari和Chrome */
	    -o-transform:rotate(0deg);/* Opera */
    }
 }

@keyframes add_transform {
    0%{
        transform:rotate(-7deg);
	    -ms-transform:rotate(-7deg);/* IE9 */
	    -moz-transform:rotate(-7deg);/* Firefox */
	    -webkit-transform:rotate(-7deg);/* Safari和Chrome */
	    -o-transform:rotate(-7deg);/* Opera */
    }
    100%{
	    transform:rotate(0deg);
	    -ms-transform:rotate(0deg);/* IE9 */
	    -moz-transform:rotate(0deg);/* Firefox */
	    -webkit-transform:rotate(0deg);/* Safari和Chrome */
	    -o-transform:rotate(0deg);/* Opera */
    }
}

.add_transform {
    -webkit-animation-name: add_transform;
    animation-name: add_transform;
}

@-webkit-keyframes remove_transform {
    0%{
	    transform:rotate(0deg);
	    -ms-transform:rotate(0deg);/* IE9 */
	    -moz-transform:rotate(0deg);/* Firefox */
	    -webkit-transform:rotate(0deg);/* Safari和Chrome */
	    -o-transform:rotate(0deg);/* Opera */
    }
    100%{
        transform:rotate(-7deg);
	    -ms-transform:rotate(-7deg);/* IE9 */
	    -moz-transform:rotate(-7deg);/* Firefox */
	    -webkit-transform:rotate(-7deg);/* Safari和Chrome */
	    -o-transform:rotate(-7deg);/* Opera */
    }
 }

@keyframes remove_transform {
    0%{
	    transform:rotate(0deg);
	    -ms-transform:rotate(0deg);/* IE9 */
	    -moz-transform:rotate(0deg);/* Firefox */
	    -webkit-transform:rotate(0deg);/* Safari和Chrome */
	    -o-transform:rotate(0deg);/* Opera */
    }
    100%{
        transform:rotate(-7deg);
	    -ms-transform:rotate(-7deg);/* IE9 */
	    -moz-transform:rotate(-7deg);/* Firefox */
	    -webkit-transform:rotate(-7deg);/* Safari和Chrome */
	    -o-transform:rotate(-7deg);/* Opera */
    }
}

.remove_transform {
    -webkit-animation-name: remove_transform;
    animation-name: remove_transform;
}

.flipbook-viewport{
	overflow:hidden;
	width:600px;
	height:100%;
	background: url(../images/bg.jpg) center no-repeat;
	background-size: 100% 100%;
}

.flipbook-viewport .container{
	position:absolute;
	top:9%;
	left:0%;
	margin:auto;
	width: 100%;
}

.flipbook-viewport .flipbook{
	left:0;
	top:0;
	background: #fff;
	background-size: 100% 100%;
}


.flipbook-viewport .page{
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{

	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);

}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #472923;
	-moz-box-shadow:0 0 20px #472923;
	-o-box-shadow:0 0 20px #472923;
	-ms-box-shadow:0 0 20px #472923;
	box-shadow:0 0 20px #472923;
}

.move{position: absolute;bottom: 80%;right: 5%;width: 25%;display: none;}

/*媒体查询*/
/*iphone6s*/
@media screen and (max-width:600px){
	body,.fm{background-size:100% 100%;width: 100%;height: 100%;}
	.fm_bg{width: 100%;}
	#loading{width: 100%;height: 100%;top: 0;left: 0;margin-top: 0;margin-left: 0;}
	#loading_p p{font-size: 16px;line-height: 16px;}
	
	/* .conWidth{width: 100%;height: 100%;position: absolute;top: 0;left:0%;margin-left: 0px;overflow: hidden;}
	
	} */
	/*iphone6s qq*/
	@media screen and (max-width:414px){
	}
	
	@media screen and (min-height: 700px){
		/* #fm_logo{top: 6%;} */
	
	}
	@media screen and (min-height: 760px){
		/* #fm_logo{top: 8%;} */
	
	}
	@media screen and (max-width:400px){
	
	}
	/*iphoneX*/
	/*@media screen and (min-height: 720px){*/
	/*    #fd_ewm{top: 10%;}*/
	/*}*/
	/*iphone6 qq*/
	@media screen and (max-width:375px)and (max-height: 600px){
	
	}
	
	/*android*/
	@media screen and (max-width:360px){
	
	}
	/*android qq*/
	@media screen and (max-width:360px) and (max-height: 600px){
	
	}
	
	/*iphone5*/
	@media screen and (max-width:320px){
	
	}
	/*iphone5 qq*/
	@media screen and (max-width:320px  ) and (max-height: 468px){
	
	}