html,
    body {
        height: 100%;
        width: 100%;
    }

    html{
        font-size: calc(100vh/45);
    }

    #mapDiv{
        width:100%; 
        height:90%;

    }

    #floatInfo {
        position: absolute;
        float: right;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        right: 0.3%;
        width: 30%;
        background-color: white;
        border-radius: 30px;
        z-index: 998;
        text-align: center;
        display: none;
        cursor: default;
        box-shadow: 0px 0px 10px 5px rgb(170, 20, 28);
    }
    
    #content {
        width: 100%;
        height: 90%;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }
    
    img{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .closeBtn {
        float: right;
        font-size: 1.5em;
        padding-right: 5%;
        cursor: pointer;
    }
    
    #mainDiv {
        width: 100%;
        height: 100%;
        text-align: center;
    }
    
    #imgContent {
        width: 90%;
        -webkit-user-drag: none;
    }

    #legend{
        left: 0;
        bottom:25px;
        position: absolute;
        z-index: 9999;
        /* width: 20%; */
        width:200px;
        height:140px;
    }
    .copyright{
        left: 0;
        bottom:0;
        position: relative;
        z-index: 800;
        pointer-events: visiblePainted;
        pointer-events: auto;
        float: left;
        clear: both;
        padding: 0 5px;
        color: #333;
    }

    #contentDiv {
        width: 90%;
        margin: auto;
        padding-top: 10px;
    }
    
    #contentArea {
        word-wrap: break-word;
        text-align: left;
        font-size: 0.8rem;
        height: 5.1rem;
        overflow-y: auto;

    }
    #contentArea p{
        text-indent: 1.6rem;
    }
    #contentArea::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    #contentArea:hover::-webkit-scrollbar-thumb {
        cursor: pointer;
    }
    #contentArea::-webkit-scrollbar-thumb {
    /* background-color: #2963e298; */
        background-color: rgb(170, 20, 28);
        border-radius: 10px;
        border: 1px solid #ffffff;
    }
    #contentArea::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #dfdfdf;
    }
    #contentArea::-webkit-scrollbar-corner {
        background-color: #dfdfdf;
    } 
    #floatInfoHeader{
        cursor:move;
    }

    #posName{
        width: 80%;
        margin: auto;
        font-family: '隶书';
        font-size:1.2rem;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    #buttonDiv {
        width: 90%;
        margin: auto;
        padding-top: 1rem;
    }
    
    .toolButton {
        width: 1.5rem;
        height: 1.5rem;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0px 0px 5px 3px #b6b4b4;
    }
    .toolButton:disabled {
        box-shadow: 0px 0px 10px 5px #dfdfdf;
        cursor: not-allowed;
    }
    
    .layui-header {
         /* background-color: rgb(170, 20, 28); */
        
        background: url(data/icon/title.jpg) no-repeat;
        height: 100px;
        position:relative;
        background-size: auto 100%;
        /* height: 4rem;  */
    }
    
    .shiftDiv {
        width: 100%;
        height: 100%;
        text-align: center;
    }
    
    #moreInfoDiv,#holoFrame,#modelFrame,#modelVideo,#hologramVideo,#modelError,#holoError{
        border: none;
        width: 90%;
        margin: auto;
        display: none;
    }

    #modelError,#holoError{
        padding-top: 0.8rem;
    }

    #moreInfoDiv{
        text-align: left;
        padding-top: 0.8rem;
        /* font-size: 0.8rem; */
    }

    #moreInfo{
        background-color: rgb(170, 20, 28);
    }
    #moreInfo:disabled{
        background-color: #dfdfdf;
    }

    #model{
        background-color:rgb(169, 136, 122);
    }
    #model:disabled{
        background-color: #dfdfdf;
    }

    #hologram{
        background-color: rgb(239,192, 73);
    }
    #hologram:disabled{
        background-color: #dfdfdf;
    }


    #box {
        float: left;
        position:absolute;
        background-color: rgb(170, 20, 28);
        border-radius: 8px;
        /* position: relative; */
        z-index: 999;
        box-shadow: 3px 3px 3px 1px rgb(173, 172, 172);
    }
    #box #triangle {
        height: 8px;
        width: 8px;
        position: absolute;
        border-width: 2px;
        border-style: solid;
        border-color: transparent;
        background-color: rgb(170, 20, 28);
        box-shadow:-3px 3px 0px 0px rgb(173, 172, 172);
        bottom: -5px;
        left: 50%;
        -webkit-transform: translateX(-50%) rotate(-45deg);;
        transform: translateX(-50%) rotate(-45deg);;
    }

    #posNameRed{
        color:#ffffff;
        margin:3px;
        font-size: 0.8rem;
        text-align: center;
        
    }