html {
    height: 100%;
}

body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    background-color: #000000;
}

.modal_wrap .close {
    position: fixed;
    background-color: transparent;
    border: 0 none;
    top: 3%;
    right: 1%;
    z-index: 9999;
}

.modal_wrap {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    background-color: rgba(13, 8, 0, 0.75);
    width: 100%;height: 100%;
}
.media_slide {
    overflow: auto;
    height: 100%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

@media screen and (orientation: landscape) {
    /*横屏 css*/
    .imageout {
        overflow: hidden;
        position: absolute;
        width: 60%;
        height: 100%;
        left:0;
        overflow: hidden;
    }
    .imageout2{
        overflow: hidden;
        position: absolute;
        top: 10%;
        left:15%;
        width:70%;
        height:80%; 
        background-color: rgba(31,18,0,0.7);
        border-radius: 10px;
    }

    .imageout2 .imageclass {
        /* margin: 0 auto; */
        position: absolute;
        /* display: block; */
        /* text-align:center; */
        /* display: flex;   
        justify-content: center; */

    }
    .modal_wrap .descripe {
        overflow: hidden;
        position: absolute;  
        flex-direction: column;
        margin: 0 0 0 0;
        position: absolute;
        width: 53%; 
        left:53%;
        top: 0; 
        height: 100%;
    }
    .descripe .tagName {
        position:absolute;
        width: 80%;
        height: 80%;
        top:10%;
        left:0;
        /* right: 18%; */
        background-color:rgba(31,18,0,0.7);
        border-radius: 10px;
        
    }

    @font-face{
        font-family:'myfont';
        src:url('../font/myfont.ttf');
    }
    .descripe .tagNameText {
        position: absolute;
        left: 5%;
        top:5%;
        width: 90%;
        height: 5%;
        color:  #FFE5B1;   
        text-align: left;
        /* line-height: 40px; */
        font-size: 20px; 
        font-family:myfont;
    }

    .descripe .explainContentText {
        position: absolute;
        left: 5%;
        /* top: calc(10% + 80px);  */
        top:15%;
        width: 90%;
        height: 85%;
        color:  #FFE5B1;
        text-align: left;
        line-height: 30px;
        font-size: 17px; 
        text-indent: 2em;
        font-family:myfont;
    }

}

@media screen and (orientation: portrait) {

    .imageout {
        overflow: hidden;
        position: absolute;
        height:50%;
        width:100%;
        bottom:0;
    }
    .imageout2{
        overflow: hidden;
        position: absolute;
        top: 0;
        left:10%;
        width:80%;
        height:80%; 
        background-color: rgba(31,18,0,0.7);
        border-radius: 10px;
    }
    .imageclass {
        margin: 0 auto;
        position: absolute;
        /* display: block;
        text-align:center; */
        /* display: flex;   
        justify-content: center; */
    }

    .modal_wrap .descripe {
        overflow: hidden;
        position: absolute;  
        flex-direction: column;
        margin: 0 0 0 0;
        position: absolute;
        width: 100%; 
        top: 0; 
        height: 50%;
    }

    .descripe .tagName {
        position:absolute;
        width: 80%;
        height: 70%;
        bottom:10%;
        left:10%;
        /* right: 18%; */
        background-color:rgba(31,18,0,0.7);
        border-radius: 10px; 
    }
    @font-face{
        font-family:'myfont';
        src:url('../font/myfont.ttf');
    }
    .descripe .tagNameText {
        position: absolute;
        overflow:auto;
        left: 5%;
        top:10%;
        width: 90%;
        height: 20%;
        color:  #FFE5B1;   
        text-align: left;
        /* line-height: 40px; */
        font-size: 20px; 
        font-family:myfont;
    }
    .descripe .explainContentText {
        position: absolute;
        overflow:auto;
        left: 5%;
        /* top: calc(10% + 40px);  */
        top:40%;
        width: 90%;
        height: 60%;
        color:  #FFE5B1;
        text-align: left;
        line-height: 30px;
        font-size: 17px; 
        text-indent: 2em;
        font-family:myfont;
    }
}