@-webkit-keyframes opener {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(15px);
    }
}
@keyframes opener {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(15px);
    }
} 
@-webkit-keyframes opener1 {
    0% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(10px);
    }
}
@keyframes opener1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
} 

body,html{
    overflow-x: hidden;
}
.app{
    overflow: hidden;
}
.modal-open{
    padding:0 !important;
}
.login-box {
    z-index: 10000;
}
#vd_con{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:0;
    background: url('../img/vd_bg.jpg') no-repeat;
    background-size: cover;
}
#major{
    position: relative;
    z-index: 1;
    background:rgba(0,0,0,0.7);
}
.top_edge{
    width:100%;
    background: url('../img/top_edge_m.jpg') no-repeat;
    background-size: cover;
    height: 0.03rem;
    position:absolute;
    left:0;
    top:0;
    z-index:3;
}
.bottom_edge{
    width:100%;
    background: url('../img/bottom_edge.jpg') no-repeat;
    background-size: cover;
    height: 0.03rem;
    position:absolute;
    left:0;
    bottom:0;
    z-index:3;
}
#one,#two{
    position: relative;
 }

 #slide_icon{
    width:61px;
    height:74px;
    background: url('../img/slide_icon.png') no-repeat;
    background-size: cover;
    position:absolute;
    left:50%;
    bottom:20px;
    margin:0 0 0 -30.5px;
    -webkit-animation: opener1 1s ease-in-out alternate infinite;
    animation: opener1 1s ease-in-out alternate infinite;
}
#slide_icon > div{
    width:3px;
    height:10px;
    background: url('../img/slide_icon_line.png') no-repeat;
    position:absolute;
    top: 34px;
    left: 27px;
    -webkit-animation: opener 1s ease-in-out alternate infinite;
    animation: opener 1s ease-in-out alternate infinite;

}
#one{
    width:100%;
    background: url('../img/home_bg_m.jpg') top center no-repeat;
    background-size:cover;
}
#sg{
    width:4rem;
    height:8.3rem;
    background: url('../img/top_sg.png') no-repeat;
    background-size: cover;
    position: absolute;
    top:50%;
    left:50%;
    margin:-4.5rem 0 0 -2.2rem
}

#heluo_logo{
    width:4.3rem;
    height:1rem;
    background: url('../img/heluo_logo.png') no-repeat;
    background-size: cover;
    position: absolute;
    top:0.4rem;
    left:50%;
    margin:0 0 0 -2.15rem;
}



#music_btn{
    width:0.61rem;
    height:0.6rem;
    cursor:pointer;
    background: url('../img/music_btn_off.png') center no-repeat;
    background-size:cover;
    position:absolute;
    left:0.08rem;
    bottom:1rem
}
#music_btn.on{
    background: url('../img/music_btn_on.png') center no-repeat;
    background-size:cover;
}

#cb_home_btn{
    width:0.61rem;
    height:0.6rem;
    cursor:pointer;
    background: url('../img/cb_home_btn.png') center no-repeat;
    background-size:cover;
    position:absolute;
    left:0.08rem;
    bottom:0.33rem;
}


#figure{
    width:9rem;
    height:11.53rem;
    background: url('../img/figure.png') center center no-repeat;
    background-size: cover;
    position: absolute;
    top:0.5rem;
    left:50%;
    margin:0 0 0 -4.5rem;
}


.tab_1{
    width:1.72rem;
    height:1.72rem;
    background: url('../img/tab_1.png') center no-repeat;
    background-size: cover;
    cursor: pointer;
    
}
.tab_1:hover,.tab_1.on{
    background: url('../img/tab_1_act.png') center no-repeat;
    background-size:cover;
}
.tab_2{
    width:1.72rem;
    height:1.72rem;
    background: url('../img/tab_2.png') center no-repeat;
    background-size:cover;
    cursor: pointer;
}
.tab_2:hover,.tab_2.on{
    background: url('../img/tab_2_act.png') center no-repeat;
    background-size:cover;
}
.tab_3{
    width:1.72rem;
    height:1.72rem;
    background: url('../img/tab_3.png') center no-repeat;
    background-size:cover;
    cursor: pointer;
}
.tab_3:hover,.tab_3.on{
    background: url('../img/tab_3_act.png') center no-repeat;
    background-size:cover;
    cursor: pointer;
}
.tab_4{
    width:1.72rem;
    height:1.72rem;
    background: url('../img/tab_4.png') center no-repeat;
    background-size:cover;
    cursor: pointer;
}
.tab_4:hover,.tab_4.on{
    background: url('../img/tab_4_act.png') center no-repeat;
    background-size:cover;
    cursor: pointer;
}

#tab_con .tab_1{
    position: absolute;
    left:0.25rem;
    bottom:0.62rem;
}
#tab_con .tab_2{
    position: absolute;
    left:2.01rem;
    bottom:0.62rem;
}
#tab_con .tab_3{
    position: absolute;
    left:3.77rem;
    bottom:0.62rem;
}
#tab_con .tab_4{
    position: absolute;
    left:5.53rem;
    bottom:0.62rem;
}













#pop_con{
    background:rgba(0,0,0,0.85);
    position:fixed;
    left:0;
    top:0;
    z-index:20000;
    width:100%;
    height:100%;
}
#pop_con > .pop{

}
#pop1 > div,#pop2 > div{
    width:100%;
    height:4.3rem;
    position: absolute;
    left:0;
    top:50%;
    margin:-2.15rem 0 0 0;
}
#close{
    width:1.07rem;
    height:1.07rem;
    position:fixed;
    right:0.16rem;
    top:0.16rem;
    background: url('../img/pop_close.png') center no-repeat;
    background-size:cover;
    cursor: pointer;
    z-index:10;
}

#pop4{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    width:100%;

}
#pop_con .tabClick{
    position:absolute;
    top:50%;
    margin: 3rem 0 0 0;
}
#pop_con .tab_1{
    left:0.37rem;
}
#pop_con .tab_2{
    left:2.1rem;
}
#pop_con .tab_3{
    left:3.75rem;
}
#pop_con .tab_4{
    left:5.62rem;
}

#pop4 > div{
    width:6.67rem;
    height:18.21rem;
    background:#000 url('../img/bg_introduce_m.png') center no-repeat;
    background-size: cover;
    margin:1.5rem 0 1.2rem 0.38rem;

}
#pop3 > div{
    width:100%;
    height:100%;
    background:url('../img/array_bg_m.jpg') center no-repeat;
    background-size:cover;
}
#pop3{
    width:6.77rem;
    height:5.04rem;
    position: absolute;
    left:0.37rem;
    top:50%;
    margin:-2.52rem  0 0 0;
}
#pop3 #cvs{
    width: 5.55rem;
    height: 6.74rem;
    position: absolute;
    left: -0.3rem;
    top: -0.9rem;
}
#pop3 #cvs canvas{
    width:100%;
}
.pop > div{
    width:100%;
    height:100%;
}

.pop > span{
    position: absolute;
    width:3.34vw;
    height:3.34vw;
}
.pop .lt{
    background:url('../img/lt_horn.png') center no-repeat;
    background-size: cover;
    left:-9px;
    top:-9px;
}
.pop .lb{
    background:url('../img/lb_horn.png') center no-repeat;
    background-size: cover;
    left:-9px;
    bottom:-9px;
}
.pop .rt{
    background:url('../img/rt_horn.png') center no-repeat;
    background-size: cover;
    right:-9px;
    top:-9px;
}
.pop .rb{
    background:url('../img/rb_horn.png') center no-repeat;
    background-size: cover;
    right:-9px;
    bottom:-9px;
}


#three{
    width:100%;
    height:1.75rem;
    background: url('../img/bar_txt_m.jpg') no-repeat;
    background-size:cover;
    position:absolute;
    z-index: 1;
    left:0;
    top:0;
}
#four{
    width:100%;
    position: relative;
    overflow: hidden;
}
#four span{
    display: block;
    width: 135%;
    height: 18.93rem;
    background: url(../img/role_four_m.png) center no-repeat;
    background-size: 100%;
    margin: 0;
    position: absolute;
    left: -1.8rem;
    top: 50%;
    margin: -8.5rem 0 0 0;
}

#four_left{
    width:2.77rem;
    height:3.55rem;
    position: absolute;
    left:0.7rem;
    top:50%;
    margin: -2.7rem 0 0 0;
    background:url('../img/four_left_m.png') center no-repeat;
    background-size: cover;
}

#four_right{
    width:2.86rem;
    height:2.61rem;
    position: absolute;
    right:0.52rem;
    top:50%;
    margin: -1.72rem 0 0 0;
    background:url('../img/four_right_m.png') center no-repeat;
    background-size: cover;
}

#four_btn{
  
    width:5.6rem;
    height:1.74rem;
    left: 50%;
    top: 50%;
    margin:2rem 0 0 -2.8rem;
    position: absolute;
    cursor: pointer;

}
#four_btn > div{
    background: url(../img/four_btn.png) center no-repeat;
    background-size:100%;
    width:100%;
    height:100%;
    -webkit-animation: opener 1s ease-in-out alternate infinite;
    animation: opener 1s ease-in-out alternate infinite;
}

#five{
    position: relative;
    width:100%;
    background: url(../img/five_bg_m.jpg) center no-repeat;
    background-size: cover;
}

.act_con{
    width:6.75rem;
    height:10.99rem;
    background: url(../img/act_bg_m.png) center no-repeat;
    background-size: cover;
    position: absolute;
    left:50%;
    top:50%;
    margin:-5.5rem 0 0 -3.375rem
}

#ft{
    width:100%;
    background: url(../img/ft_bg_m.png) center no-repeat;
    background-size: cover;
    height: 14.27rem;
    position: relative;
}
#cb_top{
    width:0.81rem;
    height:0.81rem;
    cursor: pointer;
    background: url(../img/cb_top.png) center bottom no-repeat;
    background-size: cover;
    position: absolute;
    left:50%;
    bottom:1.2rem;
    margin: 0 0 0 -0.405rem;

}


#speak_con{
    width:3.97rem;
    height:1rem;
    position: absolute;
    left:1.4rem;
    top:3.77rem;
}
#speak_con > div{
    width:100%;
    height:100%;
    display:none;
}
#speak_con .speak_0{
    background: url(../img/speak_0.png) center bottom no-repeat;
    background-size: cover;
}
#speak_con .speak_1{
    background: url(../img/speak_1.png) center bottom no-repeat;
    background-size: cover;
}
#speak_con .speak_2{
    background: url(../img/speak_2.png) center bottom no-repeat;
    background-size: cover;
}
#speak_con .speak_3{
    background: url(../img/speak_3.png) center bottom no-repeat;
    background-size: cover;
}
#speak_con .speak_4{
    background: url(../img/speak_4.png) center bottom no-repeat;
    background-size: cover;
}




#dd{
    display:flex;
    position:absolute;
    left:0.24rem;
    bottom:1.46rem;
}
#dd > div{
    margin-right:0.05rem;
}
.d1{
    width:1.23rem;
    height:1.53rem;
    background: url(../img/d1.png) center bottom no-repeat;
    background-size: cover;
}
.d1.finish{
    background: url(../img/d1_finish.png) center bottom no-repeat;
    background-size: cover;
}

.d2{
    width:1.23rem;
    height:1.53rem;
    background: url(../img/d2.png) center bottom no-repeat;
    background-size: cover;
}
.d2.finish{
    background: url(../img/d2_finish.png) center bottom no-repeat;
    background-size: cover;
}

.d3{
    width:1.23rem;
    height:1.53rem;
    background: url(../img/d3.png) center bottom no-repeat;
    background-size: cover;
}
.d3.finish{
    background: url(../img/d3_finish.png) center bottom no-repeat;
    background-size: cover;
}


.d4{
    width:1.23rem;
    height:1.53rem;
    background: url(../img/d4.png) center bottom no-repeat;
    background-size: cover;
}
.d4.finish{
    background: url(../img/d4_finish.png) center bottom no-repeat;
    background-size: cover;
}

.d5{
    width:1.23rem;
    height:1.53rem;
    background: url(../img/d5.png) center bottom no-repeat;
    background-size: cover;
}
.d5.finish{
    background: url(../img/d5_finish.png) center bottom no-repeat;
    background-size: cover;
}

#link_btn{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow: hidden;
    opacity: 0;  
}

#link_btn span{
    width:100% !important;
    height:100% !important
}
#link_btn iframe{
    transform: scale(2);
    -webkit-transform: scale(2);
}



#code_pop{
    background:rgba(0,0,0,0.85);
    position:fixed;
    left:0;
    top:0;
    z-index:20000;
    width:100%;
    height:100%;
}
#code_pop > div{
    width:6.76rem;
    height:7.56rem;
    background: url('../img/code_pop_m.png') center no-repeat;
    background-size:cover;
    position: absolute;
    left:0.38rem;
    top:50%;
    margin:-3.78rem 0 0 0
}
#close_code_pop{
    width:0.81rem;
    height:0.81rem;
    position: absolute;
    right:0.12rem;
    top:0.12rem;
    background: url(../img/pop_close.png) center no-repeat;
    background-size: cover;
    cursor: pointer;
}


#code_pop > div ul{
    list-style: none;
    color:#fff;
    width:100%;
    text-align: center;
    font-size:0.32rem;
    padding:2.33rem 0 0 0;
}
#code_pop > div li{
    list-style: none;
    padding: 0 0 0.36rem 0;
}
#code_pop > div li a{
    display:inline-block;
    width:0.95rem;
    height:0.47rem;
    line-height:0.47rem;
    background:#fff;
    color: #000;
    text-align: center;
    margin-left:0.29rem;
}
#code_pop > div li a:hover{
    text-decoration: none;
}

#code_btn{
    position: absolute;
    left: 3.5rem;
    bottom: 0;
    transform-origin: right top;
    width: 2.44rem;
    overflow: hidden;
    height: 0.6rem;
    opacity: 0;
}


#no_log{
    width:5.98rem;
    height:2.67rem;
    background: url(../img/log_box.png) center no-repeat;
    background-size: cover;
    position: absolute;
    right: 0.4rem;
    top: 5rem;
}

#log_btn{
    width:5.4rem;
    height:1.34rem;
    background: url(../img/log_btn_m.png) center no-repeat;
    background-size: cover;
    cursor: pointer;
    position: relative;
    top:0.1rem;
    left:0.36rem;
    -webkit-animation: opener1 1s ease-in-out alternate infinite;
    animation: opener1 1s ease-in-out alternate infinite;
}

#ye_log{
    width:6.02rem;
    height:2.67rem;
    background: url(../img/yes_log_box.png) center no-repeat;
    background-size: cover;
    position: absolute;
    right: 0.4rem;
    top: 5rem;
}
#h2{
    font-size: 0.24rem;
    color: #fff;
    padding: 0.4rem 0.5rem 0 1.4rem;
    line-height: 0.38rem;
    height: 1.5rem;
    margin: 0;
}

#sub{
    width: 1.25rem;
    height:0.73rem;
    cursor: pointer;
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    z-index:10;
}


#choice{
    font-size: 0.32rem;
    color: #fff;
    padding: 0 0 0 1.4rem;
    display: table-cell;
    vertical-align: middle;
}
#choice span{
    display:inline-block;
    width:0.19rem;
    height:0.19rem;
    background: url(../img/ck_yes.png) center no-repeat;
    background-size: cover;
    margin-right:0.16rem;
}
#choice > div{
    cursor: pointer;
}
#choice .cut span{
    display:inline-block;
    width:0.19rem;
    height:0.19rem;
    background: url(../img/ck_no.png) center no-repeat;
    background-size: cover;
    margin-right:0.16rem;
}
.h2{
    padding: 0 0.3rem 0 0.2rem;
    margin: 0 !important;
    height: 1.4rem;
    display: flex;
    align-items: center; 
}
#use_btn{
    position: absolute;
    left: 0.76rem;
    bottom: 0;
    transform-origin: right top;
    width: 2.44rem;
    overflow: hidden;
    height: 0.6rem;
    opacity: 0;
}
#right_btn{
    position: absolute;
    left: 0.76rem;
    bottom: 0;
    transform-origin: right top;
    width: 2.44rem;
    overflow: hidden;
    height: 0.6rem;
    opacity: 0;
}

#right_btn span{
    width:100% !important;
    height:100% !important
}
#right_btn span iframe{
    width:100% !important;
    height:100% !important
}

#error_x{
    width:5.97rem;
    height:3.05rem;
    position: absolute;
    left:0.36rem;
    top:4.23rem;
}
.error_box{
    width:100%;
    height:1.5rem;
    background: url(../img/error_x.png) center no-repeat;
    background-size: cover;
    margin: 1rem 0 0 0;
}
.fb_btn{
    background: url(../img/share_btn.png) center no-repeat;
    background-size: cover;
    -webkit-animation: opener1 1s ease-in-out alternate infinite;
    animation: opener1 1s ease-in-out alternate infinite;
    width:4.77rem;
    height:1.18rem;
    margin:0rem 0 0 0.6rem;
    cursor: pointer;
}

#correct_box{
    width:5.99rem;
    height:2.65rem;
    background: url(../img/correct_bg_m.png) center no-repeat;
    background-size: cover;
    position: absolute;
    right: 0.4rem;
    top: 5rem;
    color:#fff;
    font-size:0.32rem;
}
#g_name{
   width: 4.53rem;
   text-align: center;
   margin:0 0 0 1.2rem;
   padding:0.52rem 0 0.8rem 0;
}
#g_name em,#g_code em{
    font-style: normal;
}
#g_code{
    width: 4.53rem;
    text-align: center;
    margin:0 0 0 1.2rem;
}


#yes_icon{
    width:3.97rem;
    height:1rem;
    position: absolute;
    left:1.4rem;
    top:3.77rem;
    background: url(../img/yes_icon.png) center no-repeat;
    background-size: cover;
}
#bad_icon{
    width:3.97rem;
    height:1rem;
    position: absolute;
    left:1.4rem;
    top:3.77rem;
    background: url(../img/bad_icon.png) center no-repeat;
    background-size: cover;
}




#cvs1{
    width: 3rem;
    height: 6.74rem;
    position: relative;
    left: -0.1rem;
    top: -0.8rem;
}
#cvs1 canvas{
    width:100%;
}