/*-----------手机公共样式-----------*/
*{font-family:'微软雅黑','Open Sans','Helvetica Neue',Arial,"Hiragino Sans GB",sans-serif;padding:0;margin:0;border:0;list-style-type:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
html{border:none;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{word-wrap:break-word;word-break:break-all;background:#f3f3f5;}
ul,ol{list-style-type:none;}
button,submit,input,select,textarea{outline:none;}
button,submit,input,select{vertical-align:middle;}
button,submit,input[type="button"]{cursor:pointer; -webkit-appearance: none;}
textarea{resize:none;outline:none;}
input,textarea{-webkit-appearance:none;}
button::-moz-focus-inner,
submit::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner{padding:0;border:none;}
table{border-collapse:separate;border-spacing:1px;}
th,td{text-align:left;}
address,cite,dfn,em,var{font-style:normal;}
img{border:none;vertical-align:middle;}
a{outline:none;}
a:link,a:visited{text-decoration:none;outline:none;}
a:hover,a:active{outline:none;}
iframe{vertical-align:top;}
*html{zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))}
.clearfix{*zoom:1}
.clearfix:after{content:'\20';display:block;clear:both;height:0;overflow:hidden;}
.hide{display:none;}

.clearfix{*zoom:1}
.clearfix:after{content:'\20';display:block;clear:both;height:0;overflow:hidden;}
.fl{float:left;}
.fr{float:right;}
ul li{list-style-type:none;}
.fullImg{width:100%;}
.fixed{
	position: fixed;
	z-index:10000;
}
.black{
	background:rgba(0,0,0,0.5)
}


.loading{width:100%;height:100%;background:#fff;z-index:1000000;left:0;right:0;top:0;bottom:0;}
.loading section{align-items:center;display:flex;height:100%;}
.loader { position: relative; width: 60px; height: 60px; border-radius: 50%; margin: 0 auto; display: inline-block; vertical-align: middle; }
.loader-20 { width: 30px; height: 30px; border: 3px dashed #0097FF; -webkit-animation: stars-rotate-reverse 2s linear both infinite; animation: stars-rotate-reverse 2s linear both infinite; }
.loader-20 .css-diamond { position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); -webkit-transform: scale(0.3); transform: scale(0.3); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; border-color: transparent transparent #fff transparent; }
.loader-20 .css-diamond:after { border-color: lightgrey transparent transparent transparent; }
.css-diamond { border-style: solid; border-color: transparent transparent #ce93d8 transparent; border-width: 0 25px 25px 25px; height: 0; width: 50px; position: relative; margin: 20px 0 50px 0; }
.css-diamond:after { content: ""; position: absolute; top: 25px; left: -25px; width: 0; height: 0; border-style: solid; border-color: #ce93d8 transparent transparent transparent; border-width: 70px 50px 0 50px; }

@-webkit-keyframes stars-rotate-reverse {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes stars-rotate-reverse {
 0% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}

body,html,.main{
	height:100%;
}
/* .main{max-width:750px;width:100%;margin:0 auto;padding-bottom: 15px;} */
#iframe{
	width:100%;
	min-height:100%;
}
.intro{
	bottom:145px;
	left:0;
	right:0;
	color:#fff;
	font-size:12px;
	padding: 20px 0;
	
}
.intro p{
	text-indent:26px;
	line-height:55px;
}
.intro p.title{
	text-indent: 0;
	text-align: center;
}
.close{
	width: 43px;
    position: absolute;
    right: 20px;
    top: 20px;
}
.intro .con{
	height:115px;
	overflow: hidden;
	margin-bottom: 10px;
	font-size: 30px;
	padding: 0 20px;
}
.upward img{
	width: 50px;
    margin: 0 auto 10px;
    display: block;
}

.resize img{animation: start 1.5s infinite ease-in-out;}
@keyframes start{0%,30%{opacity:0;transform:translate(0,10px)}60%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(0,-8px)}}

.bottomNav{
	position: fixed;
	bottom:0;
	left:0;
	right:0;
	background:#fff;
	padding:25px 0;
}
.bottomNav p{
	display:flex;
    justify-content: space-between;
	background: -moz-linear-gradient(left, #fa0713, #f64715 );
    background: -webkit-linear-gradient(left, #fa0713,#f64715);
    background: -o-linear-gradient(left, #fa0713,#f64715);
    background: -ms-linear-gradient(left, #fa0713,#f64715);width: 90%;
    border-radius: 100px;
    margin: 0 auto;
    padding: 25px 0;
}
.bottomNav span{
    font-size: 37px;
	color:#fff;
	flex: 1;
	text-align: center;
	border-right:1px solid #fff;
}
.bottomNav span:last-child{
	margin-right:0;
}
.bottomNav span.zhanting{
	color:#ffdb70;
}
/* .detail{
	background: -moz-linear-gradient(left, #FFA200, #FFBE57 );
    background: -webkit-linear-gradient(left, #FFA200,#FFBE57);
    background: -o-linear-gradient(left, #FFA200,#FFBE57);
	background: -ms-linear-gradient(left, #FFA200,#FFBE57);
	color:#fff;
	font-size:13px;
	border-radius:100px;
	padding:4px 13px;
}
.shop{
	background: -moz-linear-gradient(left, #0097FF, #57C0FF );
    background: -webkit-linear-gradient(left, #0097FF,#57C0FF);
    background: -o-linear-gradient(left, #0097FF,#57C0FF);
	background: -ms-linear-gradient(left, #0097FF,#57C0FF);
	color:#fff;
	font-size:13px;
	border-radius:100px;
	padding:4px 13px;
} */

.musicBtn{
	position:fixed;
	top:0px;
	right:0px;
	padding:15px;
}

.bgm-btn{width: 80px; height: 80px; background-size: 100%; background-image: url("../images/play.png"); z-index: 1; -webkit-animation: myrotate 5s linear 0s infinite normal;animation: myrotate 5s linear 0s infinite normal;}
.bgm-btn.mut {
	background-image: url("../images/mute.png");
	-webkit-animation: none;
}
@-webkit-keyframes myrotate
{
0% { -webkit-transform:rotate(0deg);}
25% { -webkit-transform:rotate(90deg);}	
50% { -webkit-transform:rotate(180deg);}
75% { -webkit-transform:rotate(270deg);}
100% { -webkit-transform:rotate(360deg);}
}