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

.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.png) 0 top no-repeat ;background-size:100% auto ;position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: -1;}
.page1{background: url(../img/index.png) left top no-repeat #2B7D8B;background-size: 100% auto;height: 100%;}
.page1_btn{padding-top: 75vh;}
.page1_btn div{height: .7rem;margin: .2rem 0;width: 36%;float: left;margin: 0 7%;}
.page1_btn .page1_start{background: url(../img/start.png) center top no-repeat;background-size: 100% auto ;}
.page1_btn .page1_hdsm{background: url(../img/hdsm.png) center top no-repeat;background-size: 100% auto  ;}
.page1_btn .page1_ph{background: url(../img/ph.png) center top no-repeat;background-size: auto 100% ;}
.page1_bottom{box-sizing: border-box;padding: 10%;margin-top: 5vh;color: #FFF;}

/*中间*/
.index_main{
    margin: 154px auto 0 auto;
    padding-top:131px;
    position: relative;
    z-index: 2;
}


.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_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{background: url(../img/bottom.png) left bottom no-repeat;background-size: 100% auto;}
.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:.5rem 1rem 1rem 1rem;font-size: .3rem;background: url(../img/reg.png) center top no-repeat;background-size: 100% 100%;margin: 0 auto;}
.index_form .nav{width: 50%;float: left;margin: 0;}
.index_form .nav div{width:1rem;height:1rem;margin: .1rem auto;box-sizing: border-box;border: 5px solid #FFF;border-radius: 50%;}
.index_form .nav.on div{border-color:#FBE8BD;}
.index_form .nav div img{width: 100%;object-fit: cover;}
.index_form .nav h3{text-align: center;font-weight: 900;font-size: .3rem;color: #0B6A57;}
.index_form .nav span{font-size: .2rem;text-align: center;width: 100%;display: block;color: #0B6A57;}
.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: .22rem;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: .22rem;
}
.index_form .btn_share{background: url(../img/btn_share.png) center center no-repeat;width: 50%;height: .6rem;background-size: 90% auto;margin: 0;}

.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;}
.group{padding: 1rem .5rem 1rem;text-align: center;}
.group_bg{background: url(../img/qd_bg.png) center top no-repeat;background-size: 100% auto;padding: .8rem 0;}
.group ul li{margin: .1rem 0;text-align: center;}
.group ul li img{width: 100%;}

.group_bg .jdt{background: url(../img/b_jd.png) left center no-repeat;width:3.2rem;height:.4rem;margin: .1rem auto;background-size: 100% 100%;box-sizing: border-box;padding:.075rem .1rem;position: relative;}
.group_bg .jdt .jd{height: .25rem;width: 0%;overflow: hidden;}
.group_bg .jdt .jd img{width: 3.03rem;height: 100%;display: block;border-radius:.2rem;}
.group_bg .jdt .jd_score{width: 100%;text-align: center;color: #FFF;position: absolute;height: .4rem;line-height: .4rem;top: 0;left: 0;font-size: .26rem;}

.share_overlay{
    position: fixed;top:0;right:0;left:0;bottom:0;display: none;
    background-color: rgba(0,0,0,0.8);
}
.share_overlay_img{width: 158px;position: absolute;right:20px;top:30px;}
.share_overlay_text{
    text-align: center;color: #fff;font-size: 18px;padding-top: 245px;
}
.share_overlay_btn{width: 100px;color: #FFF;text-align: center;margin: 40px auto;font-size: 18px;border: 1px solid #FFF;border-radius: 8px;height: 30px;line-height: 30px;}