@-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;
}

    #vd_con{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    z-index:0;
}
#major{
    position: relative;
    z-index: 1;
    background:rgba(0,0,0,0.7);
}

#one,#two{
   position: relative;
}
.login-box{
    z-index:10000;
}
#one{
    width:100%;
    background: url('../img/home_bg.jpg') top center no-repeat;
    background-size:cover;
}
#sg{
    width:22.343vw;
    height:43.229vw;
    background: url('../img/top_sg.png') no-repeat;
    background-size: cover;
    position: absolute;
    top:50%;
    left:50%;
    margin:-21.614vw 0 0 -11.171vw;
}
#heluo_logo{
    width:24.645vw;
    height:5.677vw;
    background: url('../img/heluo_logo.png') no-repeat;
    background-size: cover;
    position: absolute;
    bottom:1.562vw;
    left:1.041vw;
}
#figure{
    width: 45.364vw;
    height: 44.531vw;
    background: url('../img/figure.png') no-repeat;
    background-size: cover;
    position: absolute;
    top:50%;
    left:50%;
    margin:-22.265vw 0 0 -22.682vw;
}
.top_edge{
    width:100vw;
    background: url('../img/top_edge.jpg') no-repeat;
    background-size: cover;
    height: 0.3vw;
    position:absolute;
    left:0;
    top:0;
    z-index:3;
}
.bottom_edge{
    width:100vw;
    background: url('../img/bottom_edge.jpg') no-repeat;
    background-size: cover;
    height: 0.3vw;
    position:absolute;
    left:0;
    bottom:0;
    z-index:3;
}
#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;

}
#three{
    width:100%;
    height:9vw;
    background: url('../img/bar_txt.png') no-repeat;
    background-size:cover;
    position:absolute;
    z-index: 1;
    left:0;
    top:0;
}
#four{
    width:100%;
    position: relative;
}
#four span{
    display: block;
    width: 55vw;
    height: 64vw;
    background: url(../img/role_four.png) center no-repeat;
    background-size: cover;
    margin: 3.8vw 0 0 -30.3vw;
    position: absolute;
    left: 50%;
    top: 0;
}

#music_btn{
    width:2.7vw;
    height:2.7vw;
    cursor:pointer;
    background: url('../img/music_btn_off.png') center no-repeat;
    background-size:cover;
    position:absolute;
    right:1vw;
    top:1vw;
}
#music_btn.on{
    background: url('../img/music_btn_on.png') center no-repeat;
    background-size:cover;
}

#cb_home_btn{
    width:2.7vw;
    height:2.7vw;
    cursor:pointer;
    background: url('../img/cb_home_btn.png') center no-repeat;
    background-size:cover;
    position:absolute;
    right:1vw;
    top:4.5vw;
}
.tab_1{
    width:7.4vw;
    height:7.4vw;
    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:7.4vw;
    height:7.4vw;
    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:7.4vw;
    height:7.4vw;
    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:7.4vw;
    height:7.4vw;
    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{
    position: relative;
    width: 100%;
    height: 100%;
    top: -6vw;
    left: -1vw;
}
#tab_con .tab_1{
    position: absolute;
    left: 57vw;
    top: 50%;
    margin: 21vw 0 0 0;
}
#tab_con .tab_2{
    position: absolute;
    left: 61.8vw;
    top: 50%;
    margin: 16.5vw 0 0 0;
}
#tab_con .tab_3{
    position: absolute;
    left: 66.7vw;
    top: 50%;
    margin: 11.9vw 0 0 0;
}
#tab_con .tab_4{
    position: absolute;
    left: 71.3vw;
    top: 50%;
    margin: 7.5vw 0 0 0;
}


#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{
    border:9px #2a1a0c solid;
    width:47vw;
    height:25vw;
    display:none;
    position:absolute;
    left:50%;
    top:50%;
    margin:-16vw 0 0 -23.5vw;
}

#close{
    width:2.7vw;
    height:2.7vw;
    position:absolute;
    left:50%;
    top:50%;
    background: url('../img/pop_close.png') center no-repeat;
    background-size:cover;
    cursor: pointer;
    margin: -17.5vw 0 0 24vw;
}


#pop_con .tabClick{
    position:absolute;
    bottom:8vw;
}
#pop_con .tab_1{
    left:33vw;
}
#pop_con .tab_2{
    left: 41vw;
}
#pop_con .tab_3{
    left: 49vw;
}
#pop_con .tab_4{
    left:57.5vw;
}

#pop4 > div{
    width:100%;
    height:100%;
    background:#000 url('../img/bg_introduce.jpg') center no-repeat;
    background-size:104%;
}
#pop3 > div{
    width:100%;
    height:100%;
    background:url('../img/array_bg.jpg') center no-repeat;
    background-size:cover;
}
#pop3 #cvs{
    width: 20vw;
    height: 10vw;
    position: absolute;
    left: 6vw;
    top: -1vw;
}
#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;
}

#four_left{
    width:17.6vw;
    height:21.7vw;
    position: absolute;
    left: 20vw;
    top:50%;
    margin:-10.53vw 0 0 0;
    background:url('../img/four_left.png') center no-repeat;
    background-size: cover;
}

#four_right{
    width:23.4vw;
    height:16.7vw;
    position: absolute;
    right: 17vw;
    top:50%;
    margin:-8.3vw 0 0 0;
    background:url('../img/four_right.png') center no-repeat;
    background-size: cover;
}

#four_btn{
  
    width: 18.8vw;
    height: 5.8vw;
    left: 50%;
    top: 50%;
    margin: 15vw 0 0 -10.4vw;
    position: absolute;
    cursor: pointer;

}
#four_btn > div{
    background: url(../img/four_btn.png) center no-repeat;
    background-size: cover;
    width:100%;
    height:100%;
    -webkit-animation: opener 1s ease-in-out alternate infinite;
    animation: opener 1s ease-in-out alternate infinite;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
  
    /**webkit上也可以用以下语句  **/
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
 
}
#five{
    position: relative;
    width:100%;
    background: url(../img/five_bg.jpg) center no-repeat;
    background-size: cover;
}

.act_con{
    width:61.45vw;
    height:33.54vw;
    background: url(../img/act_bg.png) center no-repeat;
    background-size: cover;
    position: absolute;
    left:50%;
    top:50%;
    margin:-16.77vw 0 0 -30.725vw
}
#ft{
    width:100%;
    background: url(../img/ft_bg.png) center bottom no-repeat;
    background-size: cover;
    height:61.51vw;
    position: relative;
}
#cb_top{
    width:2.6vw;
    height:2.6vw;
    cursor: pointer;
    background: url(../img/cb_top.png) center bottom no-repeat;
    background-size: cover;
    position: absolute;
    right: 0.5vw;
    bottom: 2vw;

}

#speak_con{
    width:22.14vw;
    height:5.73vw;
    position: absolute;
    left:1.041vw;
    bottom:2.801vw;
}
#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:24.06vw;
    bottom:1.718vw;
}
#dd > div{
    margin-right:0.781rem;
}
.d1{
    width:5.677vw;
    height:7.187vw;
    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:5.677vw;
    height:7.187vw;
    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:5.781vw;
    height:7.187vw;
    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:5.677vw;
    height:7.187vw;
    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:5.677vw;
    height:7.187vw;
    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{
  transform: scale(10);
  -webkit-transform:scale(10);
}
#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:29.583vw;
    height:26.718vw;
    background: url('../img/code_pop.png') center no-repeat;
    background-size:cover;
    position: absolute;
    left:50%;
    top:50%;
    margin:-13.359vw 0 0 -14.7915vw;
}
#close_code_pop{
    width: 2.7vw;
    height: 2.7vw;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url(../img/pop_close.png) center no-repeat;
    background-size: cover;
    cursor: pointer;
    margin: -14.8vw 0 0 15.5vw;
}

#code_pop > div ul{
    list-style: none;
    color:#fff;
    width:100%;
    text-align: center;
    font-size:1.041vw;
    padding:9.166vw 0 0 0;
}
#code_pop > div li{
    list-style: none;
    padding: 0 0 1.25vw 0;
}
#code_pop > div li a{
    display:inline-block;
    width:3.177vw;
    height:1.458vw;
    line-height:1.458vw;
    background:#fff;
    color: #000;
    text-align: center;
    margin-left:0.937vw;
}
#code_pop > div li a:hover{
    text-decoration: none;
}

#code_btn{
    width: 1.65vw;
    height: 6.53vw;
    cursor: pointer;
    position: absolute;
    top: 17.2vw;
    right: 0.4vw;
}


#no_log{
    width:30.781vw;
    height:13.593vw;
    background: url(../img/log_box.png) center no-repeat;
    background-size: cover;
    position: absolute;
    right: 6vw;
    top: 10vw;
}

#log_btn{
    width: 22.2395vw;
    height: 5.5208vw;
    background: url(../img/log_btn.png) center no-repeat;
    background-size: 100%;
    cursor: pointer;
    position: relative;
    top: 1vw;
    left: 4vw;
    -webkit-animation: opener1 1s ease-in-out alternate infinite;
    animation: opener1 1s ease-in-out alternate infinite;
}


#ye_log{
    width:30.781vw;
    height:13.593vw;
    background: url(../img/yes_log_box.png) center no-repeat;
    background-size: cover;
    position: absolute;
    right: 6vw;
    top: 10vw;
}
.h2{
    padding: 0.2vw 1.3vw 0 7.447vw;
    height: 5.5vw;
    display:flex;
    align-items: center;  
}
#h2{
    line-height:1.8vw;
    font-size:1.2vw;
    color:#fff;
    margin:0;
    padding:0;
}
#sub{
    width: 6.5vw;
    height: 3.75vw;
    cursor: pointer;
    position: absolute;
    right: 1.6vw;
    bottom: 1.6vw;
    z-index:10;
}

#choice{
    font-size: 1.5vw;
    color: #fff;
    padding: 0 0 0 7.4vw;
    height: 6.5vw;
    position: relative;
    top: -0.8vw;
    display: table-cell;
    vertical-align: middle;
    margin: 0;
}
#choice span{
    display:inline-block;
    width:0.989vw;
    height:0.989vw;
    background: url(../img/ck_yes.png) center no-repeat;
    background-size: cover;
    margin-right:0.625vw;
}
#choice > div{
    cursor: pointer;
    width:100%;
    
}
#choice .cut span{
    display:inline-block;
    width:0.989vw;
    height:0.989vw;
    background: url(../img/ck_no.png) center no-repeat;
    background-size: cover;
    margin-right:0.625vw;
}
#use_btn{
    width: 1.65vw;
    height: 6.53vw;
    cursor: pointer;
    position: absolute;
    top: 10.2vw;
    right: 0.4vw;
}

#right_btn{
    width: 1.65vw;
    height: 6.53vw;
    cursor: pointer;
    position: absolute;
    top: 10.2vw;
    right: 0.4vw;
    opacity: 0;
    overflow: hidden;
    
}
#right_btn span{
   transform: scale(10);
   -webkit-transform: scale(10);
}

#error_x{
    width:30.88vw;
    height:14.53vw;
    position: absolute;
    left:25.62vw;
    top:5.781vw;
    left: 24.62vw;
    top: 9.99vw;
}
.error_box{
    width:100%;
    height:7.656vw;
    background: url(../img/error_x.png) center no-repeat;
    background-size: cover;
}
.fb_btn{
    background: url(../img/share_btn.png) center no-repeat;
    background-size: 100%;
    -webkit-animation: opener1 1s ease-in-out alternate infinite;
    animation: opener1 1s ease-in-out alternate infinite;
    width: 22.2395vw;
    height: 5.5208vw;
    margin: -1vw 0 0 4.5vw;
    cursor: pointer;
}

#correct_box{
    width:30.781vw;
    height:13.593vw;
    background: url(../img/correct_bg.png) center no-repeat;
    background-size: cover;
    position: absolute;
    right: 6vw;
    top: 10vw;
    color:#fff;
    font-size:1.666vw;
}
#g_name{
    padding:2.5vw 0 4vw 7.552vw;
}
#g_name em,#g_code em{
    font-style: normal;
}
#g_code{
    padding:0 0 0 7.552vw;
}


#yes_icon{
    width:22.14vw;
    height:5.73vw;
    position: absolute;
    left:1.041vw;
    bottom:2.801vw;
    background: url(../img/yes_icon.png) center no-repeat;
    background-size: cover;
}
#bad_icon{
    width:22.14vw;
    height:5.73vw;
    position: absolute;
    left:1.041vw;
    bottom:2.801vw;
    background: url(../img/bad_icon.png) center no-repeat;
    background-size: cover;
}
#cvs1{
    width: 20vw;
    height: 10vw;
    position: relative;
    top: -5vw;
    left: -1vw;
}
#cvs1 canvas{
    width:100%;
}