@charset "utf-8";
/* CSS Document */
/*AisngMu北京众达网通信息技术有限公司*/
@charset "utf-8";
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin: 0; padding: 0; font-size: 1em; font-family: 'microsoft yahei', Verdana, Arial, Helvetica, sans-serif;}
body { min-width: 320px; font-size: 1em; color: #000; -webkit-text-size-adjust: none; background:#eff0f2;}
/*body{background-color:#bfbfbf;}*/
img, fieldset { border: 0 }
/*img{ width:100%; height:100%; display:block;}*/
ul, ol { list-style: none }
em, address { font-style: normal }
a { color: #000; text-decoration: none; outline:none; }
table { border-collapse: collapse }
.clearfix { zoom: 1; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
input { outline: none; }
#clear { clear: both; width: 100%; background-color: #fff }
#clear:after { display: block; clear: both; height: 1px; margin-top: -1px; content: '' }
.floatleft { float: left; }
.floatright { float: right; }
.fl { float: left; }
.fr { float: right; }
*{box-sizing: border-box;}
.margin-auto { margin: 0 auto; }
.hide { display: none; }
img{ width:100%; height:100%; display:block;}
a { color: #333333; }
.content { min-height: 400px; }
.in-main { min-height: 400px; }
.myPreferred { min-height: 400px; }
.main { min-height: 400px; }
.menu_icon{ text-align: center; vertical-align: middle; display: inline-block; background-size: contain;}
/*head*/
header { min-width: 320px; max-width: 640px; margin: 0 auto; font-size: 14px; width: 100%; background-color: #ffffff; }
@media screen and (min-width:480px) {
header { font-size: 20px; }
}
@media screen and (min-width:640px) {
header { font-size: 28px; }
}
.new-header { height: 2.647em; line-height: 2.647em; padding: 0 0.588em; position: relative; text-align: center; border-bottom: 1px solid #dcdcdc; font-size: 1.214em; }
a.new-a-back { width: 2.529em; line-height: 1.7em; color: #64a000; position: absolute; left: 0.588em; top: .557em; background: url(../img/icon.png) no-repeat -8.647em -2.458em; background-size: 10.529em 4.205em; display: block; padding-left: 1em; text-align: left; font-size: 1em; }
.new-header h2 { font-size: 1em; padding: .457em 0; height: 1.7em; line-height: 1.7em; color: #020202; font-weight: normal; }
.back-box a.new-a-ok { position: absolute; top: .457em; right: .714em; width: 3.529em; height: 1.5em; line-height: 1.5em; color: #69af05; text-align: center; font-size: 1.214em; }
/*ui_all_layer*/
.ui_all_layer { min-width: 320px; max-width: 640px; margin: 0 auto; font-size: 14px; width: 100%; position: relative; z-index: 99999; overflow: hidden; }
@media screen and (min-width:480px) {
.ui_all_layer { font-size: 28px; }
}
@media screen and (min-width:640px) {
.ui_all_layer { font-size: 34px; }
}
.in-area { min-width: 320px; max-width: 640px; max-height:100%; font-size: 16px;  position:fixed; left:0; top:0; right:0; margin-left:auto; margin-right:auto; z-index:9999; }
@media screen and (min-width: 480px) {
.in-main , .in-area{ font-size: 20px; }
}
@media screen and (min-width: 640px) {
.in-main , .in-area{ font-size: 28px; }
}
.frist_page{
max-width:100%;
	position:absolute;
	z-index:10;
	top: 7px;
}
.img_box{ width:100%; height:100%;}
.go{ width:3.464em; height:3.464em; background:url(play.png) no-repeat; background-size:cover; position:absolute; bottom:35%; left:43%;}
.second_page{ position:relative; left:640px; display:none; width:100%; height:100%; background-size:contain;}
.second_page .text { width: 100%; position:absolute; bottom:10%;}
.third_page{ width:100%; height:100%; position:relative; left:640px; display:none; z-index:1111;}
.share{ display:block; width:2em; height:2em; position:absolute; top:62%; right:20%;}
.arrow{ width:100%; height:100%; position:absolute; z-index:100; top:0; left:0; background:#000; opacity:0.5; display:none;}
.arrow_top{ background:url(arrow.png) no-repeat; width:3.5em; height:3.5em; float:right; background-size:contain;}
.plus_minus{ line-height:1.75em; width:60%; position:absolute; top:60%; left:20%;}
.plus_minus span{ width:1.75em; height:1.75em; border-radius:0.143em; color:#fff; text-align:center; line-height:1.5em; border:1px solid #fff; display:block;}
.text p{ color:#fff; line-height:1.357em; text-align:center;}
.line{ width:0.25em; height:45%; background:#fff; position:absolute; top:20%; left:50%; margin:0 auto;}
.dabai{ width:2em; height:1.25em; background:url(o.png) no-repeat; background-size:contain;  position:absolute; top:95%; left:-350%;}
.dabai
{
animation-name:myfirst;
animation-duration:7s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:7s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:7s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:7s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;
}

@keyframes myfirst
{
0%   {left:-350%; top:95%;}
50%  {left:-350%; top:-5%;}
100% {left:-350%; top:95%;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {left:-350%; top:95%;}
50%  {left:-350%; top:-5%;}
100% {left:-350%; top:95%;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {left:-350%; top:95%;}
50%  {left:-350%; top:-5%;}
100% {left:-350%; top:95%;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {left:-350%; top:95%;}
50%  {left:-350%; top:-5%;}
100% {left:-350%; top:95%;}
}
.music{ width:1.5em; height:1.5em; background:url(music.png) no-repeat; background-size:contain; position:absolute; right:5%; top:3%; 
    animation-duration: 4s;
    animation-iteration-count: infinite; 
    animation-name: music;
    animation-play-state: running;
    animation-timing-function: linear;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: music;
    -webkit-animation-play-state: running;
    -webkit-animation-timing-function: linear;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: music;
    -moz-animation-play-state: running;
    -moz-animation-timing-function: linear;
    -o-animation-duration: 4s;
    -o-animation-iteration-count: infinite;
    -o-animation-name: music;
    -o-animation-play-state: running;
    -o-animation-timing-function: linear;			
	}
@keyframes music {
0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(90deg);
}
50% {
    transform: rotate(180deg);
}
75% {
    transform: rotate(270deg);
}
100% {
    transform: rotate(360deg);
}
}
@-moz-keyframes music /* Firefox */
{
0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(90deg);
}
50% {
    transform: rotate(180deg);
}
75% {
    transform: rotate(270deg);
}
100% {
    transform: rotate(360deg);
}
}
@-webkit-keyframes music /* Safari and Chrome */
{
0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(90deg);
}
50% {
    transform: rotate(180deg);
}
75% {
    transform: rotate(270deg);
}
100% {
    transform: rotate(360deg);
}	
}
@-o-keyframes music /* Opera */
{
0% {
    transform: rotate(0deg);
}
25% {
    transform: rotate(90deg);
}
50% {
    transform: rotate(180deg);
}
75% {
    transform: rotate(270deg);
}
100% {
    transform: rotate(360deg);
}
}