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

body,div,p,h1,dl,dt,dd,ul,li,a{ 
    margin:0;
    padding:0;
}
img {
    border:none;
	margin:0 auto;
	max-width:100%;
	height:auto;
}
html{width:100%;max-width:480px;height:100%;margin:0 auto;}
body{height:100%;max-width:480px;font-family:"微软雅黑","Times New Roman"; color:#333;}
/*以上为重置代码*/
@-ms-viewport       { width: device-width; }
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

/*首页样式*/
/*logo进入动画*/
@-webkit-keyframes mymove /* Chrome, Safari, Opera */
{
0%{opacity: 0;left:-30px;}
90%{opacity: 1;left:0;}
}
@-moz-keyframes mymove /* Firefox */
{
0%{opacity: 0;left:-30px;}
90%{opacity: 1;left:0;}
}
@-o-keyframes mymove /* Opera */
{
0%{opacity: 0;left:-30px;}
90%{opacity: 1;left:0;}
}
@keyframes mymove /* Standard syntax */
{
0%{opacity: 0;left:-30px;}
90%{opacity: 1;left:0;}
}
/*logo进入动画结束*/
/*title进入动画*/
@-webkit-keyframes mymove1 /* Chrome, Safari, Opera */
{
0%{opacity: 0;top:-30px;}
90%{opacity: 1;top:0;}
}
@-moz-keyframes mymove1 /* Firefox */
{
0%{opacity: 0;top:-30px;}
90%{opacity: 1;top:0;}
}
@-o-keyframes mymove1 /* Opera */
{
0%{opacity: 0;top:-30px;}
90%{opacity: 1;top:0;}
}
@keyframes mymove1 /* Standard syntax */
{
0%{opacity: 0;top:-30px;}
90%{opacity: 1;top:0;}
}
/*title进入动画结束*/
/*enter按钮进入动画*/
@-webkit-keyframes mymove2 /* Chrome, Safari, Opera */
{
0%{opacity: 0;top:80%;}
90%{opacity: 1;top:72%;}
}
@-moz-keyframes mymove2 /* Firefox */
{
0%{opacity: 0;top:80%;}
90%{opacity: 1;top:72%;}
}
@-o-keyframes mymove2 /* Opera */
{
0%{opacity: 0;top:80%;}
90%{opacity: 1;top:72%;}
}
@keyframes mymove2 /* Standard syntax */
{
0%{opacity: 0;top:80%;}
90%{opacity: 1;top:72%;}
}
/*enter按钮进入动画结束*/
/*footer进入动画*/
@-webkit-keyframes mymove3 /* Chrome, Safari, Opera */
{
0%{opacity: 0;}
90%{opacity: 1;}
}
@-moz-keyframes mymove3 /* Firefox */
{
0%{opacity: 0;}
90%{opacity: 1;}
}
@-o-keyframes mymove3 /* Opera */
{
0%{opacity: 0;}
90%{opacity: 1;}
}
@keyframes mymove3 /* Standard syntax */
{
0%{opacity: 0;}
90%{opacity: 1;}
}
/*footer进入动画结束*/

.blue-bg{background: url(../images/index_bg.jpg) center no-repeat #579630;--background-size:cover;}
#main{position:relative;margin:0 auto;width:100%;height:700px;max-width:480px;overflow:hidden;}	
.logo{width:80px;position:absolute;top:2px;left:6px;z-index:9;
-webkit-animation: mymove 0.5s linear  1; /* Chrome, Safari, Opera */
-moz-animation:mymove 0.5s linear  1;/* Firefox */
-o-animation:mymove 0.5s linear  1;/* Opera */
animation:mymove 0.5s linear  1;/* Standard syntax */
}

.main-circle{position:relative;vertical-align:bottom;width:78%;height:60%;margin:0 auto;overflow:hidden;
-webkit-animation: mymove3 1.5s linear  1; /* Chrome, Safari, Opera */
-moz-animation:mymove3 1.5s linear  1;/* Firefox */
-o-animation:mymove3 1.5s linear  1;/* Opera */
animation:mymove3 1.5s linear  1;/* Standard syntax */
}
.main-circle img{display:block;margin:0 auto;}

.main-title{position:relative;height:18%;font-family:"幼圆","微软雅黑";font-size:1.8rem;color:#fff;text-align:center;font-weight:normal;margin:0 auto;margin-top:12%;overflow:hidden;
-webkit-animation: mymove1 1s linear  1; /* Chrome, Safari, Opera */
-moz-animation:mymove1 1s linear  1;/* Firefox */
-o-animation:mymove1 1s linear  1;/* Opera */
animation:mymove1 1s linear  1;/* Standard syntax */
}
.enter-btn{position:absolute;top:71%;left:25%;width:50%;height:31%;z-index:2;overflow:hidden;
-webkit-animation: mymove2 0.5s linear  1; /* Chrome, Safari, Opera */
-moz-animation:mymove2 0.5s linear  1;/* Firefox */
-o-animation:mymove2 0.5s linear  1;/* Opera */
animation:mymove2 0.5s linear  1;/* Standard syntax */
}
.enter-btn a{display:block;padding:10px 0;margin-top:10px;text-align:center; text-decoration:none;color:#fff;border:1px solid #fff;
-webkit-border-radius: 20px;
   -moz-border-radius: 20px;
        border-radius: 20px;
}
.enter-btn a:hover{background-color:rgba(255,255,255,0.3);}

#footer{position:absolute;top:700px;left:0;width:100%;text-align:center;color:#fff;padding-bottom:2%;z-index:2;font-size:0.8em;line-height:16px;
-webkit-animation: mymove3 1s linear  1; /* Chrome, Safari, Opera */
-moz-animation:mymove3 1s linear  1;/* Firefox */
-o-animation:mymove3 1s linear  1;/* Opera */
animation:mymove3 1s linear  1;/* Standard syntax */
}


@media screen and (max-width:440px){
	#footer{top:640px;}
	#main{height:680px;}
}
@media screen and (max-width:360px){
	#footer{top:580px;}
	#main{height:620px;}
}