html{height: 100%;}
body{ background: url(../img/body.png) center top no-repeat;overflow: scroll;background-size: cover;}

.index_bg-top{
    position: absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    height: 410px;
   /* background: url(../img/index_bg-t.png) 0 0 no-repeat;*/
    background-size: 100% auto;
    z-index: 1;
}
.index_bg-top.in{
    -webkit-animation:fadeInDownBig 1s .2s ease both;
    animation:fadeInDownBig 1s .2s ease both;
}
.index_bg-top.out{
    -webkit-animation:fadeOutUpBig 1s .2s ease both;
    animation:fadeOutUpBig 1s .2s ease both;
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}
/*.index_bg{ position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: url(../img/index.jpg) 0 top no-repeat #0189FF;
    background-size: 100% auto;
    z-index: 0;}*/
.mian_bg{
    background: url(../img/body.jpg) 0 top no-repeat #0189FF;background-size:100%  auto ;position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: -1;}
/*.index_bg-bottom{
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: url(../img/main_bg-gray.jpg) 0 bottom no-repeat;
    background-size: 100% 100%;
    -webkit-animation:fadeInUpBig 1s .2s ease both;
    animation:fadeInUpBig 1s .2s ease both;
    z-index: -1;
}*/

/*中间*/
.index_main{
    margin: 154px auto 0 auto;
    padding-top:131px;
    position: relative;
    z-index: 2;
}
.index_title{
    position:absolute;
    top:0;
    width:100%;
    height:72px;
    background: url(../img/index_title.png) center 0 no-repeat;
    background-size: contain;
}
.index_title.in{
    -webkit-animation:fadeIn 1s .2s ease both;
    animation:fadeIn 1s .2s ease both;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.index_title.out{
    -webkit-animation:fadeOut 1s .2s ease both;
    animation:fadeOut 1s .2s ease both;
}
.index_btn{width: 90%;text-align: center;margin: 0 auto;height: auto;overflow: hidden;}
.index_start{
    position:absolute;
    top:69px;
    width:100%;
    height:79px;
    background: url(../img/index_start.png) center 0 no-repeat;
    background-size: contain;
}
.index_start.in{
    -webkit-animation:bounceIn 1s .2s ease both;
    animation:bounceIn 1s .2s ease both;
    animation-delay: 1.2s;
    -webkit-animation-delay: 1.2s;
}
.index_start.out{
    -webkit-animation:fadeOut 1s .2s ease both;
    animation:fadeOut 1s .2s ease both;
}

/*.index_num{*/
    /*text-align: center;*/
    /*color:#fdd620;*/
    /*font-size:16px;*/
/*}*/
.index_num.in{
    -webkit-animation:fadeIn 1s .2s ease both;
    animation:fadeIn 1s .2s ease both;
    animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
}
.index_num.out{
    -webkit-animation:fadeOut 1s .2s ease both;
    animation:fadeOut 1s .2s ease both;
}

/*书*/
.index_book{
    position:absolute;
    bottom:186px;
    width:100%;
    height:152px;
    background: url(../img/index_book.png) center 0 no-repeat;
    background-size: contain;
    z-index: 2;
}
.index_book.in{
    -webkit-animation:fadeInUpBig 1s .2s ease both;
    animation:fadeInUpBig 1s .2s ease both;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.index_book.out{
    -webkit-animation:fadeOutDownBig 1s .2s ease both;
    animation:fadeOutDownBig 1s .2s ease both;
}
/*支持*/
.index_support{
    position:absolute;
    bottom:30%;
    width:100%;
    height:83px;
    text-align: center;
    color:#000;
    font-size:16px;
    line-height: 1.5;
}
.index_support-inner{
    text-align: center;
    display: inline-block;
    margin:0 auto;
}
.index_support p:last-child{
    padding-top:20px;font-size: 14px;
}
.index_support.in{
    -webkit-animation:fadeInUpBig 1s .2s ease both;
    animation:fadeInUpBig 1s .2s ease both;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.index_support.out{
    -webkit-animation:fadeOutDownBig 1s .2s ease both;
    animation:fadeOutDownBig 1s .2s ease both;
}
/*底部箭头按钮*/
.index_next{
    position:absolute;
    bottom:10px;
    width:100%;
    text-align: center;
}
.index_next-icon{
    display: inline-block;
    border-right: 4px solid #fff;
    border-bottom: 4px solid #fff;
    transform: rotate(225deg);
    cursor: pointer;
    position : relative;
    width : 1.2em;
    height : 1.2em;
    bottom : 1.8em;
}
.index_next-icon.in{
    animation : bounce 0.5s cubic-bezier(0.3,0.6,1,0.5) alternate infinite;
    -webkit-animation : bounce 0.5s cubic-bezier(0.3,0.6,1,0.5) alternate infinite;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
.index_next-icon.out{
    display: none;
    -webkit-animation:fadeOutDownBig 1s .2s ease both;
    animation:fadeOutDownBig 1s .2s ease both;
}


/*适配====================*/
/*分辨率小于360px样式*/
@media screen and (max-width: 359px){
    .index_bg-top{
        height:360px;
    }
    .index_main{
        margin-top:90px;
        padding-top:96px;
    }
    .index_title{
        height:26px;
    }
    .index_start{
        top:45px;
        height:36px;
    }
    .index_book{
        bottom: 140px;
        height: 85px;
    }

    .index_num{
        font-size:15px;
    }
    .index_support{
        font-size:15px;
        bottom:30%;
    }
}
/*分辨率大于360小于410px样式*/
@media screen and (min-width: 360px) and (max-width: 410px){
    .index_main{
        margin-top:90px;
    }
    .index_title{
        height:50px;
    }
    .index_start{
        height:60px;
    }
    .index_book{
        bottom: 165px;
        height: 125px;
    }
    .index_support{
        font-size:15px;
        bottom:30%;
    }
}

/*动画====================*/
/*旋转-音乐*/
@-webkit-keyframes rotate-animation {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate-animation {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*弹跳-底部箭头*/
@keyframes bounce{
    60%{
        bottom : 0.5em;
    }
    to{
        bottom : 0;
    }
}
@-webkit-keyframes bounce{
    60%{
        top : 0.5em;
    }
    to{
        top : 1em;
    }
}
/*顶部淡入*/
@-webkit-keyframes fadeInDownBig{
    0%{
        opacity:0;
        -webkit-transform:translateY(-2000px)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0)
    }
}
@keyframes fadeInDownBig{
    0%{
        opacity:0;
        transform:translateY(-2000px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}
/*顶部淡出*/
@-webkit-keyframes fadeOutUpBig{
    0%{opacity:1;
        -webkit-transform:translateY(0)}
    100%{opacity:0;
        -webkit-transform:translateY(-2000px)}
}
@keyframes fadeOutUpBig{
    0%{opacity:1;
        transform:translateY(0)}
    100%{opacity:0;
        transform:translateY(-2000px)}
}
/*底部淡入*/
@-webkit-keyframes fadeInUpBig{
    0%{
        opacity:0;
        -webkit-transform:translateY(2000px)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0)
    }
}
@keyframes fadeInUpBig{
    0%{
        opacity:0;
        transform:translateY(2000px)
    }
    100%{
        opacity:1;
        transform:translateY(0)
    }
}
/*底部淡出*/
@-webkit-keyframes fadeOutDownBig{
    0%{
        opacity:1;
        -webkit-transform:translateY(0)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(2000px)
    }
}
@keyframes fadeOutDownBig{
    0%{
        opacity:1;
        transform:translateY(0)
    }
    100%{
        opacity:0;
        transform:translateY(2000px)
    }
}
/*淡入*/
@-webkit-keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
@keyframes fadeIn{
    0%{opacity:0}
    100%{opacity:1}
}
/*淡出*/
@-webkit-keyframes fadeOut{
    0%{opacity:1}
    100%{opacity:0}
}
@keyframes fadeOut{
    0%{opacity:1}
    100%{opacity:0}
}
/*弹跳进入*/
@-webkit-keyframes bounceIn{
    0%{
        opacity:0;
        -webkit-transform:scale(.3)
    }
    50%{
        opacity:1;
        -webkit-transform:scale(1.5)
    }
    70%{
        -webkit-transform:scale(.9)
    }
    100%{
        -webkit-transform:scale(1)
    }
}
@keyframes bounceIn{
    0%{
        opacity:0;
        transform:scale(.3)
    }
    50%{
        opacity:1;
        transform:scale(1.2)
    }
    70%{
        transform:scale(.9)
    }
    100%{
        transform:scale(1)
    }
}
.index_head{text-align: center;margin-bottom: .3rem;}
.index_head img{max-width: 100%;height: auto;}
.index_form{width: 90%;box-sizing: border-box;padding:.6rem .5rem .5rem;font-size: .3rem;margin: 0 auto;background: url(../img/form.png) center top no-repeat;background-size: 100% 100%;}
.index_form div{margin: .2rem 0;}
/*.index_form lable{width: 30%;height: .6rem;line-height: .6rem;text-align: justify;display: inline-block;float: left;text-align-last:justify;text-justify:distribute-all-lines;padding-right: .2rem;box-sizing: border-box;font-weight: 600;}*/
.index_form  select,.index_form  input{width: 90%;box-sizing: border-box;background: none;height: .6rem;line-height: .6rem;font-size: .26rem;border-radius: .3rem;background-color: #EFEDEC;color: #868381;border: none;box-shadow: 0 0 0;margin: 0 auto;}
.index_form  input::-webkit-input-placeholder{
  color:#868381;
  font-size: .26rem;
}
.sel-group{height: .6rem;}
.sel-group select{width: 42.5%;margin-left:5%;float: left;padding:0 .1rem ;}
.form-control{padding: 0 .3rem;}
.index_form  select option{color: #000;}
.index_bottom{width: 100%;box-sizing: border-box;padding: .5rem 0;color: #082944;text-align: center;font-size: .22rem;}
.index_bottom p{line-height: .5rem;color: #268ED4;}
/*.bg{margin-left: .5rem;background: #1567C3;padding:.2rem 0 .2rem 1rem;position: relative;border-top-left-radius:.1rem ;border-bottom-left-radius:.1rem ;overflow: hidden;}
.index_head img{width: 100%;height: auto;}
.index_form{width: 100%;box-sizing: border-box;padding: .5rem;font-size: .3rem;color: #494949;background: url(../img/div.png) left top no-repeat;background-size: 100% 100%;height: 8.5rem;}
.index_form::-webkit-scrollbar {display:none}
.index_form div{margin: .2rem 0;}
.index_form lable{width: 100%;height: .6rem;line-height: .6rem;display: inline-block;box-sizing: border-box;font-weight: 600;background: url(../img/lable.png) left center no-repeat;padding-left: .2rem; }
.index_form  select,.index_form  input{width: 100%;box-sizing: border-box;background: none;height: .6rem;line-height: .6rem;color:#494949;border: 1px solid #B2B2B2;margin: .1rem 0;border-radius: .1rem;padding-left: .1rem;}
.index_form  input::-webkit-input-placeholder{
  color:#B3B3B3;
  font-size: .26rem;
  padding-left: .1rem;
}
.index_form  select option{color: #000;}
.index_form .btn_start{width: 3rem;height: .7rem;background: #FFBF00;color: #802400;display: block;margin: .2rem auto;line-height: .7rem;text-align: center;border-radius: .35rem;}
.index_bottom{width: 100%;box-sizing: border-box;padding: .5rem 0;color: #FFF;text-align: center;font-size: .26rem;}
.index_bottom p{line-height: .5rem;}*/