html{
    font-size: calc(100vw / 7.5);
    /*font-size: 100px;*/
}

.start{position: fixed;left: 0;top:0;width: 100%;height: 100%;z-index: 9999;background: #051250;}
.start video{display: block;width: 100%;margin:0 auto;height: auto;}
.start .start_gif{
    width: 100%;
    height: 100%;
}
.start .start-btn{
    width: 120px;
    height: 40px;
    /* background-color: #00acc1; */
    border-radius: 20px;
    position: absolute;
    /* top: 10; */
    bottom: 50px;
    left: 50%;
    margin-left: -75px;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;
    letter-spacing: 1px;
}

/*菜单列表*/
#minimap_container{
    position: absolute;
    width:3rem;
    height: 3rem;
    left:0;
    top:0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
}
#minimap_container #minimap{
    width:3rem;
    height:3rem;
    position:absolute;
}
.control-btn{
    width:0.23rem;
    height:2rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("../static/control.png");
    position: absolute;
    right:-0.22rem;
    top:0.5rem;
    cursor: pointer;
}
.control-btn.on{
    background-image: url("../static/control-active.png");
}
.control-btn:hover{
    background-image: url("../static/control-hover.png");
}
.control-btn.on:hover{
    background-image: url("../static/control-active.png");
}
/*.map-audio{*/
/*bottom:0.36rem;*/
/*left:-0.3rem;*/
/*}*/
/*.map-audio-clone{*/
/*width:100%;*/
/*height:100%;*/
/*!*display: none;*!*/
/*}*/
/*解说人物*/
.commentary{
    position: absolute;
    bottom: -20px;
    right:0.3rem;
    width: 196px;
    height: 230px;
    cursor: pointer;
    background-image: url("../static/person.png");
    background-repeat: no-repeat;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    transform-origin: right bottom;
    z-index: 999;
}
/*详情蒙版*/

@media only screen and (min-width: 540px){
    #mStart{
        display: none;
    }
    #article_video{display:block;width: 1200px;height: 675px;margin:0 auto;position: absolute;left: calc(50% - 600px);top:calc(50% - 337.5px);}
    .detail_modal{
        width: 1200px;
        height: 100%;
        position: absolute;
        z-index: 99999;
        background: rgba(0, 0, 0, .5);
    }
    .video_detail_modal{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 99999;
        background: rgba(0, 0, 0, .5);
    }
    .detail_modal .main_container{
        width: 12rem;
        height: 100%;
        background: url("../static/modal_main_bg.png") no-repeat;
        background-size: cover;
        position: relative;
        font-size: 0.14rem;
    }
    #article_video{display:block;width: 1200px;height: 675px;margin:0 auto;position: absolute;left: calc(50% - 600px);top:calc(50% - 337.5px);}
    /*.video_detail_modal .main_container{*/
        /*width: 12rem;*/
        /*height: 100%;*/
        /*background-size: cover;*/
        /*position: relative;*/
        /*font-size: 0.14rem;*/
    /*}*/
    .video_detail_modal .main_container .close_btn{
        width: 45px;
        height: 45px;
        position: absolute;
        top: calc(50% - 384px);
        left: calc(50% - 645px);
        cursor: pointer;
    }
    .main_container .top_container{
        width: 11.4rem;
        height: 1.8rem;
        padding-top: 0.37rem;
        padding-bottom: 0.33rem;
        padding-left: 0.33rem;
        padding-right: 0.3rem;
        display: flex;
    }
    .main_container .top_container .avatar_container{
        width: 1.33rem;
        padding: 0.07rem 0.07rem 0.07rem 0.07rem;
        display: inline-block;
        background: #ffffff;
    }
    .main_container .top_container .avatar_container img{
        width: 1.33rem;
        height: 1.66rem;
    }
    .main_container .top_container .des_container{
        display: inline-block;
        color: #ffffff;
        width: 9.67rem;
        padding-left: 0.4rem;
    }
    .main_container .top_container .des_container .title{
        font-size: 0.3rem;
        letter-spacing: 0.1rem;
    }
    .main_container .top_container .des_container .des{
        font-size: 0.18rem;
        line-height: 0.28rem;
        /*letter-spacing: 5px;*/
    }
    .main_container .bottom_container{
        width: 11.3rem;
        height: 1.8rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    .bottom_container .top_block, .bottom_container .bottom_block{
        width: 100%;
        height: 0.16rem;
        background: #333942;
    }
    .bottom_container .top_block{
        /*box-shadow: 10px 10px 5px #888888;*/
    }
    .bottom_container .main_full_text{
        background: #ffffff;
        width: 10.7rem;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
        padding-top: 0.4rem;
        padding-bottom: 0.3rem;
        overflow-y: scroll;
        font-size: 0.18rem;
        line-height: 0.32rem;
        color: #4a4a4a;
    }
    /*下方操作按钮*/
    .operation-box{
        width:204px;
        height:168px;
        position: absolute;
        top: 16px;
        left:30px;
        /*margin-left: -102px;*/
        z-index: 999;
    }
    .arrow-box{
        width:162px;
        height:59px;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        left:50%;
        margin-left: -81px;
        cursor: pointer;
    }
    .arrow-up{
        background-image: url("../static/arrow-up.png");
        top:0;
    }
    .go_left{
        width: 30px;
        height: 30px;
        background-color: #00acc1;
        color: #ffffff;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        position: absolute;
        top: 36%;
        left: -24%;
        cursor: pointer;
    }
    .go_right{
        width: 30px;
        height: 30px;
        background-color: #00acc1;
        color: #ffffff;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        position: absolute;
        top: 36%;
        right: -30%;
        cursor: pointer;
    }
    .arrow-up:hover{
        background-image: url("../static/arrow-up-active.png");
    }
    .arrow-down{
        background-image: url("../static/arrow-down.png");
        bottom:0;
    }
    .arrow-down:hover{
        background-image: url("../static/arrow-down-active.png");
    }
    .auto-rotate{
        width:204px;
        height:38px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../static/auto.png");
        position: absolute;
        top:50%;
        margin-top: -19px;
        left:0;
        cursor: pointer;
    }
    .auto-rotate:hover{
        background-image: url("../static/auto-hover.png");
    }
    .auto-rotate.on{
        background-image: url("../static/auto-stop.png");
    }
    .auto-rotate.on:hover{
        background-image: url("../static/auto-stop-hover.png");
    }
    .operation-btn{
        width:30px;
        height:30px;
        position: absolute;

        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .map-home{
        background-image: url("../static/home-icon.png");
    }
    .map-home:hover{
        background-image: url("../static/home-active-icon.png");
    }
    .map-home{
        top:0.36rem;
        left:-0.3rem;
    }

    .map-share{
        bottom:0.36rem;
        left:-0.3rem;
    }
    .add-btn{
        background-image: url("../static/add.png");
        top:36px;
        right:-30px;
    }
    .add-btn:hover{
        background-image: url("../static/add-hover.png");
    }
    .reduce{
        background-image: url("../static/reduce.png");
        bottom:36px;
        right:-30px;
    }
    .reduce:hover{
        background-image: url("../static/reduce-hover.png");
    }
}
/*@media only screen and (max-width: 1200px){*/
    /*.detail_modal,.video_detail_modal{*/
         /*width: 100%;*/
         /*height: 100%;*/
         /*position: absolute;*/
         /*z-index: 99999;*/
         /*background: rgba(0, 0, 0, .5);*/
     /*}*/
    /*.detail_modal .main_container{*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*background: url("../static/modal_main_bg.png") no-repeat;*/
        /*background-size: cover;*/
        /*position: relative;*/
        /*font-size: 0.14rem;*/
    /*}*/
    /*.video_detail_modal .main_container{*/
        /*width: 100%;*/
        /*height: 100%;*/
        /*background-size: cover;*/
        /*position: relative;*/
        /*font-size: 0.14rem;*/
        /*background: rgba(0, 0, 0, 0.5);*/
    /*}*/
    /*.detail_modal .main_container .close_btn{*/
        /*width: 0.45rem;*/
        /*height: 0.45rem;*/
        /*position: absolute;*/
        /*top:0;*/
        /*right: 0;*/
    /*}*/
    /*!*.video_detail_modal .main_container .close_btn{*!*/
        /*!*width: 0.45rem;*!*/
        /*!*height: 0.45rem;*!*/
        /*!*position: absolute;*!*/
        /*!*top:0;*!*/
        /*!*right: 0;*!*/
    /*!*}*!*/
    /*.main_container .top_container{*/
        /*width: 94%;*/
        /*height: 20%;*/
        /*padding-top: 0.37rem;*/
        /*padding-bottom: 0.33rem;*/
        /*padding-left: 3%;*/
        /*padding-right: 3%;*/
        /*display: flex;*/
    /*}*/
    /*.main_container .top_container .avatar_container{*/
        /*width: 20%;*/
        /*height: 100%;*/
        /*padding: 0.07rem 0.07rem 0.07rem 0.07rem;*/
        /*display: inline-block;*/
        /*background: #ffffff;*/
    /*}*/
    /*.main_container .top_container .avatar_container img{*/
        /*width: 100%;*/
        /*height: 100%;*/
    /*}*/
    /*.main_container .top_container .des_container{*/
        /*display: inline-block;*/
        /*color: #ffffff;*/
        /*width: 9.67rem;*/
        /*padding-left: 0.4rem;*/
    /*}*/
    /*.main_container .top_container .des_container .title{*/
        /*font-size: 0.3rem;*/
        /*letter-spacing: 0.1rem;*/
    /*}*/
    /*.main_container .top_container .des_container .des{*/
        /*font-size: 0.18rem;*/
        /*line-height: 0.28rem;*/
        /*!*letter-spacing: 5px;*!*/
    /*}*/
    /*.main_container .bottom_container{*/
        /*width: 94%;*/
        /*height: 1.8rem;*/
        /*padding-left: 3%;*/
        /*padding-right: 3%;*/
    /*}*/
    /*.bottom_container .top_block, .bottom_container .bottom_block{*/
        /*width: 100%;*/
        /*height: 0.16rem;*/
        /*background: #333942;*/
    /*}*/
    /*.bottom_container .top_block{*/
        /*!*box-shadow: 10px 10px 5px #888888;*!*/
    /*}*/
    /*.bottom_container .main_full_text{*/
        /*background: #ffffff;*/
        /*width: 94%;*/
        /*padding-left: 3%;*/
        /*padding-right: 3%;*/
        /*padding-top: 2%;*/
        /*padding-bottom: 2%;*/
        /*overflow-y: scroll;*/
        /*font-size: 0.18rem;*/
        /*line-height: 0.32rem;*/
        /*color: #4a4a4a;*/
    /*}*/
    /*!*下方操作按钮*!*/
    /*.operation-box{*/
        /*width:204px;*/
        /*height:168px;*/
        /*position: absolute;*/
        /*top: 16px;*/
        /*left:30px;*/
        /*!*margin-left: -102px;*!*/
        /*z-index: 999;*/
    /*}*/
    /*.arrow-box{*/
        /*width:162px;*/
        /*height:59px;*/
        /*background-repeat: no-repeat;*/
        /*background-size: 100%;*/
        /*position: absolute;*/
        /*left:50%;*/
        /*margin-left: -81px;*/
        /*cursor: pointer;*/
    /*}*/
    /*.arrow-up{*/
        /*background-image: url("../static/arrow-up.png");*/
        /*top:0;*/
    /*}*/
    /*.go_left{*/
        /*width: 30px;*/
        /*height: 30px;*/
        /*background-color: #00acc1;*/
        /*color: #ffffff;*/
        /*border-radius: 15px;*/
        /*text-align: center;*/
        /*line-height: 30px;*/
        /*font-size: 14px;*/
        /*position: absolute;*/
        /*top: 36%;*/
        /*left: -24%;*/
        /*cursor: pointer;*/
    /*}*/
    /*.go_right{*/
        /*width: 30px;*/
        /*height: 30px;*/
        /*background-color: #00acc1;*/
        /*color: #ffffff;*/
        /*border-radius: 15px;*/
        /*text-align: center;*/
        /*line-height: 30px;*/
        /*font-size: 14px;*/
        /*position: absolute;*/
        /*top: 36%;*/
        /*right: -30%;*/
        /*cursor: pointer;*/
    /*}*/
    /*.arrow-up:hover{*/
        /*background-image: url("../static/arrow-up-active.png");*/
    /*}*/
    /*.arrow-down{*/
        /*background-image: url("../static/arrow-down.png");*/
        /*bottom:0;*/
    /*}*/
    /*.arrow-down:hover{*/
        /*background-image: url("../static/arrow-down-active.png");*/
    /*}*/
    /*.auto-rotate{*/
        /*width:204px;*/
        /*height:38px;*/
        /*background-repeat: no-repeat;*/
        /*background-size: 100% 100%;*/
        /*background-image: url("../static/auto.png");*/
        /*position: absolute;*/
        /*top:50%;*/
        /*margin-top: -19px;*/
        /*left:0;*/
        /*cursor: pointer;*/
    /*}*/
    /*.auto-rotate:hover{*/
        /*background-image: url("../static/auto-hover.png");*/
    /*}*/
    /*.auto-rotate.on{*/
        /*background-image: url("../static/auto-stop.png");*/
    /*}*/
    /*.auto-rotate.on:hover{*/
        /*background-image: url("../static/auto-stop-hover.png");*/
    /*}*/
    /*.operation-btn{*/
        /*width:30px;*/
        /*height:30px;*/
        /*position: absolute;*/

        /*background-repeat: no-repeat;*/
        /*background-size: 100% 100%;*/
        /*cursor: pointer;*/
    /*}*/
    /*.map-home{*/
        /*background-image: url("../static/home-icon.png");*/
    /*}*/
    /*.map-home:hover{*/
        /*background-image: url("../static/home-active-icon.png");*/
    /*}*/
    /*.map-home{*/
        /*top:0.36rem;*/
        /*left:-0.3rem;*/
    /*}*/

    /*.map-share{*/
        /*bottom:0.36rem;*/
        /*left:-0.3rem;*/
    /*}*/
    /*.add-btn{*/
        /*background-image: url("../static/add.png");*/
        /*top:36px;*/
        /*right:-30px;*/
    /*}*/
    /*.add-btn:hover{*/
        /*background-image: url("../static/add-hover.png");*/
    /*}*/
    /*.reduce{*/
        /*background-image: url("../static/reduce.png");*/
        /*bottom:36px;*/
        /*right:-30px;*/
    /*}*/
    /*.reduce:hover{*/
        /*background-image: url("../static/reduce-hover.png");*/
    /*}*/
/*}*/
@media only screen and (max-width: 540px){
    #pcStart{
        display: none;
    }
    .video_detail_modal{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 100;
        background: rgba(0, 0, 0, .5);
    }
    .video_detail_modal .main_container{
        width: 100%;
        height: 100%;
    }
    .detail_modal .main_container{
        width: 100%;
        height: 100%;
        background: url("../static/modal_main_bg.png") no-repeat;
        background-size: cover;
        position: relative;
        font-size: 0.14rem;
    }
    .video_detail_modal .close_btn{
        width: .8rem;
        height: .8rem;
        position: absolute;
        top:3rem;
        right: 0;
        z-index: 9999;
    }
    .main_container .video{
        height: 300px;
        width: 100%!important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .main_container .top_container .avatar_container{
        width: 40%;
        height: 100%;
        padding: 0.07rem 0.07rem 0.07rem 0.07rem;
        display: inline-block;
        background: #ffffff;
    }
    .main_container .top_container .avatar_container img{
        width: 100%;
        /*height: 100%;*/
    }
    .main_container .top_container .des_container{
        display: inline-block;
        color: #ffffff;
        width: 77%;
        padding-left: 3%;
    }
    .main_container .top_container .des_container .title{
        font-size: 0.2rem;
    }
    .main_container .top_container .des_container .des{
        font-size: 0.14rem;
        line-height: 0.2rem;
        /*letter-spacing: 5px;*/
        max-height: 100%;
        overflow: hidden;
    }
    .bottom_container .main_full_text{
        background: #ffffff;
        width: 94%;
        padding-left: 3%;
        padding-right: 3%;
        padding-top: 2%;
        padding-bottom: 2%;
        overflow-y: scroll;
        font-size: 0.13rem;
        line-height: 0.2rem;
        color: #4a4a4a;
    }
    .bottom_container .main_full_text img{
        max-width: 90%;
    }
    .operation-box{
        width:2.04rem;
        height:1.88rem;
        position: absolute;
        bottom: 0.35rem;
        left:50%;
        margin-left: -1.02rem;
        z-index: 999;
    }
    .arrow-box{
        width:1.7rem;
        height:0.6rem;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        left:50%;
        margin-left: -.95rem;
        cursor: pointer;
    }
    .arrow-up{
        background-image: url("../static/arrow-up.png");
        top:.25rem;
    }
    .go_left{
        width: 30px;
        height: 30px;
        background-color: #00acc1;
        color: #ffffff;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        position: absolute;
        top: 36%;
        left: -24%;
        cursor: pointer;
    }
    .go_right{
        width: 30px;
        height: 30px;
        background-color: #00acc1;
        color: #ffffff;
        border-radius: 15px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        position: absolute;
        top: 36%;
        right: -30%;
        cursor: pointer;
    }
    .arrow-up:hover{
        background-image: url("../static/arrow-up-active.png");
    }
    .arrow-down{
        background-image: url("../static/arrow-down.png");
        bottom:.25rem;
    }
    .arrow-down:hover{
        background-image: url("../static/arrow-down-active.png");
    }
    .auto-rotate{
        width:1.95rem;
        height:0.58rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("../static/auto.png");
        position: absolute;
        top:50%;
        margin-top: -0.29rem;
        left:0.05rem;
        cursor: pointer;
        display: none;
    }
    .auto-rotate:hover{
        background-image: url("../static/auto-hover.png");
    }
    .auto-rotate.on{
        background-image: url("../static/auto-stop.png");
    }
    .auto-rotate.on:hover{
        background-image: url("../static/auto-stop-hover.png");
    }
    .operation-btn{
        width:0.6rem;
        height:0.6rem;
        position: absolute;

        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .map-home{
        background-image: url("../static/home-icon.png");
    }
    .map-home:hover{
        background-image: url("../static/home-active-icon.png");
    }
    .map-home{
        top:0.36rem;
        left:-0.3rem;
    }
    .add-btn{
        background-image: url("../static/add.png");
        top: .3rem;
        right:-.7rem;
    }
    .add-btn:hover{
        background-image: url("../static/add-hover.png");
    }
    .reduce{
        background-image: url("../static/reduce.png");
        bottom:.3rem;
        right:-.7rem;
    }
    .reduce:hover{
        background-image: url("../static/reduce-hover.png");
    }
    .start{position: fixed;left: 0;top:0;width: 100%;height: 100%;z-index: 9999;background: #051250;}
    .start video{display: block;width: 100%;margin:0 auto;height: 300px;position: absolute;top: 40%;transform: translateY(-40%);}
    .start .start_gif{
        width: 100%;
        height: auto;
        position: absolute;
        top: 45%;
        transform: translateY(-45%);
    }
    .start .start-btn{
        width: 1.8rem;
        height: .6rem;
        /* background-color: #00acc1; */
        border-radius: .3rem;
        position: absolute;
        /* top: 10; */
        bottom: 50px;
        left: 50%;
        margin-left: -.9rem;
        text-align: center;
        font-size: .22rem;
        line-height: .6rem;
        color: #fff;
        cursor: pointer;
        border: 1px solid #fff;
    }
}
::-webkit-scrollbar-thumb{
    background: url(../static/scroll_btn.png);
}
/*** 小地图 ****/
.map_eye_container{
    position: absolute;
    display: none;
    z-index:5;
}
.position_dot{
    cursor: pointer;
}
/*swiper*/
.swiper-container {
    width: 600px;
    height: 300px;
}
/*音频*/
#music_icon{
    position: absolute;
    top: 0.2rem;
    right:0.3rem;
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 99;
}
.show_musi{
    -webkit-animation: Btn-bg 3s linear infinite;
    animation: Btn-bg 3s linear infinite;
}
@-webkit-keyframes Btn-bg {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes Btn-bg {
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}
/*加载屏幕*/
#loading_modal{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../static/hrg_loading_bg.jpg) center top no-repeat;
    background-size: cover;
    z-index: 9999999;
    display: none;
}
.circlechart{
    color: #ffffff;
    width: 150px;
    height: 150px;
    position: absolute;
    left:50%;
    margin-left: -75px;
    bottom: 150px;
}
@media only screen and (max-width: 540px){
    #loading_modal{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../static/hrg_loading_mobile_bg.jpg)  center top no-repeat;
        background-size: cover;
        z-index: 9999999;
    }
    .circlechart{
        bottom: 200px;
        width: 80px;
        height: 80px;
        margin-left: -40px;
    }
    @media only screen and (min-height: 700px){
        .circlechart{
            bottom: 250px;
            width: 80px;
            height: 80px;
            margin-left: -40px;
        }
    }
}