@charset "UTF-8";
/* CSS Document */
a,img,button,input,textarea{
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}
body,h1,h2,h3,h4,h5,p,form,button,dl,dd,dt {
    margin:0; padding:0; font-size:100%;
}
img {
    border:0;
}
body {
    background:#f7f7f7; height:100%;color:#555; overflow:hidden;
    font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
}
ul,ol,dl,dd,dt {
    list-style:none; margin:0; padding:0;
}
h1,h2,h3,h4 {
    font-weight:normal; font-size:100%;
}
a,img,button,input,textarea {
    outline:none; border:none; background:none;
}
a {
    color:#fff; text-decoration:none;
}
a:hover {
    color:#fff; text-decoration:none; background:none;
}
input[type=button],input[type=search]{
    -webkit-appearance:none;
    outline:none
}
/*media响应式*/
html {
    font-size: 62.5%; /* 10÷16=62.5% */
    font-family: "Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media screen and (max-width:320px) {
    html {
        font-size:88%!important; /* 14.08÷16=88% */
    }
}
@media screen and (min-width:320px) and (max-width: 360px) {
    html {
        font-size:100%!important; /* 16÷16=100% */
    }
}
@media screen and (min-width: 360px) and (max-width: 400px) {
    html {
        font-size:100%!important; /* 16÷16=100% */
    }
}
@media screen and (min-width: 400px) and (max-width: 440px) {
    html {
        font-size:113%!important; /* 18.08÷16=113% */
    }
}
@media screen and (min-width: 440px) and (max-width: 480px) {
    html {
        font-size:125%!important; /* 20÷16=125% */
    }
}
@media screen and (min-width: 480px) and (max-width: 520px) {
    html {
        font-size:138%!important; /* 22.08÷16=125% */
    }
}
@media screen and (min-width: 520px) and (max-width: 560px) {
    html {
        font-size:150%!important; /* 24÷16=150% */
    }
}
@media screen and (min-width: 560px) and (max-width: 600px) {
    html {
        font-size:163%!important; /* 26.08÷16=163% */
    }
}
@media screen and (min-width: 600px) {
    html {
        font-size:175%!important; /* 28÷16=175% */
    }
}
img#arrow{
    width: 3rem;
    position: absolute;
    left: 50%;
    bottom: .8rem;
    z-index: 99;
    margin-left: -1.5rem;
    animation: 1s infinite arrowTop;
    -webkit-animation: 1s infinite arrowTop;
}
/* mainContent */
#main{ width:640px; height:auto; position:relative; overflow:hidden;}
#list > li{width:100%; height:100%; position:absolute; left:0; top:0; color:#fff; font-size:1.8rem; display:none; text-align:center; z-index:5;background-size:cover; overflow:hidden;}
#list > li.zIndex{ z-index:6;}
#list > li:nth-of-type(1){background:#59c7ff; display:block;}
#list > li:nth-of-type(2){background:#59c7ff;}
#list > li:nth-of-type(3){background:#59c7ff;}
#list > li:nth-of-type(4){background:#59c7ff;}
#list > li:nth-of-type(5){background:#59c7ff;}
#list > li:nth-of-type(6){background:#59c7ff;}
#list > li:nth-of-type(7){background:#59c7ff;}
#list > li:nth-of-type(8){background:#59c7ff;}

.li1child,.li2child,.li6child{
    position: relative;
    width: 100%;
    height:100%;
    overflow: hidden;

}
.li1child .logotext{
    text-align: center;
}
.li1child .logotext>img{
    position: absolute;
    top:2rem;
    left:1.5rem;
}
.li1child .logotext>img:nth-of-type(1){

}

.li1child .logotext>img:nth-of-type(2){
    -webkit-animation:2s -1s infinite title; animation:2s -1s infinite title;
}
@-webkit-keyframes title{
    0%{ -webkit-transform:scale(1); opacity:0;}
    50%{ -webkit-transform:scale(1); opacity:0.8;}
    100%{ -webkit-transform:scale(1.2); opacity:0;}
}
@keyframes title{
    0%{ transform:scale(1); opacity:0;}
    50%{ transform:scale(1); opacity:0.5;}
    100%{ transform:scale(1.2); opacity:0;}
}
.li1child .summer{
    position: absolute;
    top:6rem;
    left:0;
    animation-delay:1s;
}
.li1child .summer img{
    width: 90%;
}
.li1child .bg{
    position: absolute;
    left:0;
    bottom:0;
    transition-delay: 0.5s;
    width: 100%;
}
.li1child .bg img{
    width: 100%;
}
.li1child .logo{
    position: absolute;
    bottom: 3.5rem;
    left:.3rem;
    animation-delay: 3s;
}
.li1child .logotext{
    text-align: left;
}
.li1child .logo img{
    width:12rem;
}
.li1child .tel{
    position: absolute;
    left:0;
    bottom:6.5rem;
    animation-delay: 4s;
}
.li1child .zhanlue{
    color:green;
    font-weight: bold;
    font-size: .9rem;
    position: absolute;
    left:.5rem;
    bottom:12rem;
    animation-delay: 5s;
}
.li1child .times{
    color:green;
    font-weight: bold;
    font-size: .9rem;
    position: absolute;
    left:.5rem;
    bottom:10rem;
    animation-delay: 4.5s;
}
.li1child .baoming{
    position: absolute;
    top:15rem;
    left: 8rem;
    -webkit-animation:invite 1s 1 2s;
    animation:invite 1s 1 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
@keyframes invite {
    0%{transform: rotate(0deg); opacity: 0}
    50%{transform: rotate(180deg); opacity: .5}
    100%{transform: rotate(345deg); opacity:1}
}
@-webkit-keyframes invite{
    0%{transform: rotate(0deg); opacity: 0}
    50%{transform: rotate(180deg); opacity: .5}
    100%{transform: rotate(345deg); opacity:1}
}
.li1child .bottom{
    position: absolute;
    bottom: 2rem;
    font-size: 1rem;
    text-align: left;
    padding-left: .5rem;
}
.li1child .bottom span{
    display: block;
    line-height: 2rem;
}
.li2child,.li3child,.li4child,.li5child,.li8child{
   padding: 1rem;
    width: 90%;
}
.li2child .bottom{
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    z-index: -999;
}
.li2child .bottom img{
    width: 100%;
}
.li2child h2{
    width: 10rem;
    background: #05a448;
    border-radius: 10px;
    margin-top: 1rem;
    padding: .5rem 0;
    font-size:1.5rem;
    font-weight:bold;
    text-align: center;
    animation-delay: .5s;
}
.li2child h3{
    margin:1rem 0;
    font-size:1rem;
    font-weight:bold;
    text-align: left;
    animation-delay: 1s;
}
.li2child .content{
    font-size:1rem;
    line-height:1.5rem;
    text-align: left;
    padding-bottom: 1rem;
    animation-delay: 1.5s;
}
.li2child>p:nth-of-type(1){
    animation-delay: 2s;
}
.li2child>p:nth-of-type(2){
    animation-delay: 2.5s;
}
.li2child>p:nth-of-type(3){
     animation-delay: 2.8s;
 }
.li2child>p:nth-of-type(4){
    animation-delay: 3s;
}


.li3child h2,.li8child h2,.li5child h2{
    width: 10rem;
    background: #05a448;
    border-radius: 10px;
    margin-top: 1rem;
    padding: .5rem 0;
    font-size:1.5rem;
    font-weight:bold;
    text-align: center;
    animation-delay: .5s;
}
.li3child h3{
    margin:1.5rem 0;
    font-size:1rem;
    font-weight:bold;
    text-align: left;
    animation-delay: 1s;
}
.li3child .content{
    margin-top: 2rem;
    position: relative;
}
.li3child .num{
    animation-delay: 1.5s;
}
.li3child .num li{
    width: 2rem;
    height:2.5rem;
    line-height: 2.5rem;
    margin:.4rem 0;
    background:#05a448;
    font-size: 1rem;
}
.li3child .right{
    position: absolute;
    width: 100%;
    top:0;
    animation-delay: 1.5s;
}
.li3child .right li{
    height:2.5rem;
    line-height: 2.5rem;
    margin:0 0 .4rem 3rem;
    background:white;
    color: #05a448;
    font-size:.9rem;
    padding: 0 .5rem;
    text-align: left;
}
.li4child h2{
    width: 10rem;
    background: #05a448;
    border-radius: 10px;
    margin-top: 1rem;
    padding: .5rem 0;
    font-size:1.5rem;
    font-weight:bold;
    text-align: center;
    animation-delay: .5s;
}
.li4child .pic{
    margin-top: 2rem;
}
.li4child .pic>img{
    border: 3px solid #ffffff;
    width:45%;
}
.li4child .smallPic{
    position: absolute;
    left: 12rem;
    top:10rem;
}
.li4child .smallPic img{
    border: 3px solid #ffffff;
    width: 10rem;
}
.li4child .bottom{
    width: 100%;
    margin-top: 10rem;
    overflow: hidden;
}
.li4child .bottom>img{
    position: absolute;
    left: 0;
    bottom: 0;
}
.li4child .bottom>img:nth-of-type(1){
    left:-1rem;
}
.li4child .bottom>img:nth-of-type(2){
    left:2.5rem;
    bottom: -1rem;
    animation-delay: .5s;
}
.li4child .bottom>img:nth-of-type(3){
    left:7.5rem;
    animation-delay: .8s;
}
.li4child .bottom>img:nth-of-type(4){
    left:13rem;
    bottom: -.8rem;
    animation-delay: 1s;
}
.li4child .bottom>img:nth-of-type(5){
    left:17.5rem;
    bottom: -.3rem;
    animation-delay: 1.2s;
}
.li4child .bottom>img:nth-of-type(6){
    left:14rem;
    z-index:-100;
    -webkit-animation:wheel 2s infinite linear;
    animation:wheel 2s infinite linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes wheel {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@-webkit-keyframes wheel {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
.li4child .bottom>img:nth-of-type(7){
    left:19rem;
    bottom: -.5rem;
   animation-delay: 1s;
}

.li4child .bottom>img:nth-of-type(8){
    left:4rem;
    bottom:-.6rem;
    animation-delay: 1.5s;
}
.li4child .bottom>img:nth-of-type(9){
    left:13rem;
    bottom:-.6rem;
    animation-delay: 1.6s;
}

.li5child .second-left{
    float: left;
    width: 23%;
    padding-top:1rem;
}
.li5child .second-con .ball{
    position: absolute;
    width: 23%;
    left: -3.5rem;
    padding-top: .6rem;
}
.li5child .second-con .ball span{
    display: block;
    height: 3.8rem;
    background: url("../images/ball.png") no-repeat;
    background-size: 1.5rem;
}
.li5child .second-con{
    position: relative;
    float: left;
    width: 75%;
    font-size: .8rem;
    padding-top:1rem;
}
.li5child .second-con li{
    line-height: 1.5rem;
    text-align: left;
}
.li5child .second-con li:nth-child(2n+1){
    margin-top: .3rem;
    color:#05a448;
    animation:1s secondInRight 1s;
    -webkit-animation: 1s secondInRight 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.li5child .second-con li:nth-child(2n+2){
    font-size: .7rem;
    animation:1.5s secondInRight 1s;
    -webkit-animation: 1.5s secondInRight 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/*.li5child .second-con li:nth-child(2n+3){
    font-size: .7rem;
    animation:2s secondInRight 1s;
    -webkit-animation: 2s secondInRight 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}*/
@-webkit-keyframes secondInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(1000px, 0, 0);
        transform: translate3d(1000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes secondInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(1000px, 0, 0);
        transform: translate3d(1000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-2px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}

.li8child .formtab{
    margin:1rem 0;
    font-size: 1.5rem;
}
.li8child .fields{
    height:3rem;
    margin:.5rem 0;
}
.li8child .fields span{
    font-size:1rem;
    float: left;
    height: 2.5rem;
    line-height: 2.5rem;
    margin-right:.5rem;
}
.li8child .fields select{
    float: left;
    width: 3rem;
    height:2rem;
    margin-right:.5rem;
    text-align: center;
    line-height: 2rem;
    border: 1px solid #f5f5f5;
}
.li8child .fields input{
    width: 100%;
    text-indent: 1rem;
    font-size: 1rem;
    height:2.5rem;
    line-height: 2.5rem;
    border: 1px solid #f5f5f5;
    background: #f3f3f3;
}
.li8child .btn{
    margin-top:1rem;
}
.li8child .btn input{
    background:#05a448;
    color:white;
    height:2.8rem;
    font-size: 1.5rem;
    border:#05a448 ;
    box-shadow: #1b1a1d;
}
.li8child .botCon{
    width:100%;
    height:10rem;
    position:absolute;
    left:0;
    bottom:0;
}
.li8child .botCon img{
    position:absolute;
}
.li8child .botCon img:nth-of-type(1){
    width:100%;
    bottom:30%;
    left:0;
}
.li8child .botCon img:nth-of-type(2){
    width:100%;
    height: 60%;
    left:0;
    bottom:-1rem;
    display:block;
}
.li8child .botCon img:nth-of-type(3){
    width:11rem;
    left:27%;
    bottom:3rem;
}

/*.li8child .botCon img:nth-of-type(3){
    width:30%;
    left:50%;
    margin-left:-3.2rem;
    bottom:3rem;
    -webkit-animation-delay:1s;
    animation-delay:1s;
}*/
.li8child .botCon p{
    width:100%;
    text-align:center;
    position:absolute;
    bottom:2rem;
    font-size:1.3rem;
    color:#ffd53d;
}

.music {
    display: none;
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 36px;
    height: 36px;
    background: url("../audioFile/music.svg") no-repeat;
    background-size: 100% 100%;
    z-index: 999;
}

.musicMove {
    -webkit-animation: musicMove 1s linear 0s infinite;
    animation: musicMove 1s linear 0s infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

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

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

.music audio {
    display: none;
}
.weixin{
    margin:0 auto;
    padding-top:30px ;
    text-align: center;
    background:#59c7ff;

}
.weixin h3{
    margin-bottom: 10px;
}
.weixin h2{
    margin-top: 20px;
    text-align: left;
    color:#05a448 ;
    line-height:30px;
    font-size:1rem;
}
.li6child{

}
.li6child h1{
    font-size:1.5rem;
    margin-top: 2rem;
    line-height:2rem;
}
.li6child .guanzhu{
    margin-top:1.5rem;
    font-size:1rem;
    color:darkgreen;
}
.li6child .guanzhu img{
    width: 40%;
}
/*.li6child .guanzhu .sao{
    font-size:1rem;
    height: 1rem;
    line-height:1rem;
    color:darkgreen;
}*/
.li6child .detail a{
    display: block;
    width: 50%;
    background:#05a448;
    color:white;
    height:2rem;
    line-height:2rem;
    border-radius: 5px;
    font-size: 1rem;
    border:#05a448 ;
    box-shadow: #1b1a1d;
    padding: 0 1rem;
    margin:10px auto;
}
#main .share,.weixin .share{
    position: absolute;
    left: -999px;
}