.vr_list{
    display: flex;
    height: 79px;
}
.vr_list a{
    flex: 1 1 auto;
    flex-grow: 1;
}
.vr_li{
    background-color: #E9E9E9;
    flex: 1 1 auto;
    text-align: center;
    height: 79px;
}
.vr_li:hover,.vr_li:active{
    background-color: #F5F5F5;
}
.vr_li img{
    margin: 0 auto;
    display: block;
    padding-top: 12px;
}
.vr_li .active_icon{
    display: none;
}
.vr_li p{
    margin: 2px 0 0 0;
}
.vr_li:hover .active_icon{
    display: block;
}
.vr_li:hover .normal_icon{
    display: none;
}
.vr_li:hover p{
    color: #2682B6;
}

/*detail*/
.vr_detail{

}
.vr_detail .text1{
    margin-top: 0.6rem;
    text-align: center;
    font-size: 18px;
}
.vr_detail .text2{
    margin: 0.3rem 0;
    text-align: center;
    font-size: 24px;
}
.vr_list.detail{
    width: 700px;
    margin: 25px auto 30px;
    margin-top: 25px;
}

.vr_li.active{
    background-color: #F5F5F5;
}
.vr_li.active p{
    color: #2682B6;
}
.vr_li .play{
    display: block;
}
.vr_li .hid{
    display: none;
}
.vr_detail iframe{
    width: 100%; height: 100vh
}

@media (min-width: 1025px) {
.vr_tt{margin-top:30px;}
}
@media (max-width: 1024px) {
    .vr_list{
        flex-direction: column;
        height: 270px;
    }
    .vr_li{
        margin: 5px 0;
        width: 100%;
    }
    .vr_list.detail{
        width: calc(100% - 20px);
        margin: 0 auto;
        margin-top: 25px;
    }
    .vr_detail iframe{
        height: calc(100vh - 1.2rem);
    }
}