html,
body,
form{
    max-height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Mongolian White';
    font-size: 100%;
    background-color: #f2f2f2;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a {
    text-decoration: none;
    color: #002257;
}

    a:hover {
        text-decoration: overline;
    }

    audio,video{
        z-index:99999999;
    }

#to_left {
    z-index: 10;
    position:fixed;
    top: 1px;
    right: 50px;
    width: 37px;
    height: 36px;
}

#Copyright{
    height:100%;
    width:46px;
    line-height:46px;
    text-align:center;
    position:relative;
}
#Copyright p {
    font-family: Georgia;
    font-size:90%;
}
#WrapNav{
    width:50px;
    height:100%;
    position:relative;
}
#Logo {
    background: url("../Images/logo_shu_bg.png") no-repeat top left;
    /*padding-left:5px;*/
    width: 50px;
    height: 175px;
    position: absolute;
    top: 10px;
    left: 0;
    text-align:left;
}

#Buttons {
    width: 50px;
    height: calc(100% - 210px);
    position: absolute;
    bottom: 10px;
    left: 0;
    display:flex;
    justify-content:center;
    align-items:center;
}
#menu_on,#account,#search{
    
}
#menu_on {
    display: inline-block;
    height: 44px;
    width: 44px;
    margin: 3px;
    background: url("/Images/mgl_menu.png") no-repeat;
}
#menu_box {
    position: absolute;
    height: 90%;
    width: auto;
    min-width: 100px;
    padding: 10px;
    z-index: 100;
    left: 50px;
    top: 3%;
    background-color: #ffffff;
    display: none;
    border-left: 1px solid #dedede;
    border-top: 1px solid #dedede;
    -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
    -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
    box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
}

    #menu_box ul,
    #menu_box li {
        list-style: none;
        margin:0;
        padding:0;
    }
    #menu_box ul{
        height:100%;
    }
    #menu_box li {
        display: inline-block;
        align-items: center;
        justify-content: center;
        position: relative;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        float: left;
        background-color: #ccd7ea;
        border: 2px solid #ccd7ea;
        padding: 2px;
        margin: 4px;
        color: #002257;
    }
        #menu_box li a{
            align-items: center;
            justify-content: center;
            text-align: center;
            display: block;
            width: 100%;
            height: 100%;
            color: #003994;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
        }
        #menu_box li span {
            align-items: center;
            justify-content: center;
            text-align: center;
            display: block;
            height: calc(100% - 2px);
            color: #003994;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            background-color: #91c181;
        }
        #menu_box li:hover{
            border: 2px solid #003994;
            background-color: #91c181;
        }

            #menu_box li:hover a,
        #menu_box li span  {
                color: #003994;
                text-decoration: none;
            }
@media (max-height:450px)
{
    #menu_box li {
        height: calc(50% - 16px);
    }
}
@media (min-height:450px) {
    #menu_box li {
        height: calc(33.33% - 16px);
    }
}

@media (min-height:600px) {
    #menu_box li {
        height: calc(25% - 16px);
    }
}

@media (min-height:750px) {
    #menu_box li {
        height: calc(20% - 16px);
    }
}

@media (min-height:900px) {
    #menu_box li {
        height: calc(16.66% - 16px);
    }
}

@media (min-height:1050px) {
    #menu_box li {
        height: calc(14.285% - 16px);
    }
}

@media (min-height:1200px) {
    #menu_box li {
        height: calc(12.5% - 16px);
    }
}

#account {
    display: inline-block;
    height: 44px;
    width: 44px;
    margin: 3px;
    background: url("/Images/acc_menu.png") no-repeat;
    margin:20px auto;
}
#Account_box {
    position: absolute;
    height: 90%;
    width: auto;
    min-width: 100px;
    padding: 10px;
    z-index: 100;
    left: 50px;
    top: 3%;
    background-color: #ffffff;
    display: none;
    border-left: 1px solid #dedede;
    border-top: 1px solid #dedede;
    -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
    -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
    box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
}
#search {
    display: inline-block;
    height: 44px;
    width: 44px;
    margin: 3px;
    background: url("/Images/search_menu.png") no-repeat;
}
#Search_box {
    position: absolute;
    height: 90%;
    width: auto;
    min-width: 100px;
    padding: 10px;
    z-index: 100;
    left: 50px;
    top: 3%;
    background-color: #ffffff;
    display: none;
    border-left: 1px solid #dedede;
    border-top: 1px solid #dedede;
    -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
    -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
    box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
}
    #Search_box ul, 
    #Search_box li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #Search_box li {
        align-items: center;
        justify-content: center;
        position: relative;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        float: left;
        list-style: none;
        background-color: #ccd7ea;
        border: 2px solid #ccd7ea;
        padding: 2px;
        margin: 4px;
        color: #002257;
        width: 30px;
        height: 30px;
    }
        #Search_box li a {
            align-items: center;
            justify-content: center;
            text-align: center;
            display: inline-block;
            width: 100%;
            height: 100%;
            color: #003994;
            text-decoration: none;
            font-size: 20px;
            line-height:30px;
        }
        #Search_box li:hover {
            border: 2px solid #003994;
            background-color: #91c181;
        }
            #Search_box li:hover a {
                color: #003994;
                text-decoration: none;
            }

    #src_div li a {
        font-size: 20px;
    }
#src_close {
    font-size: 200%;
    line-height: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#ContentBox {
    position: relative;
    margin: 5px;
    padding: 10px;
    height: calc(100% - 30px);
    max-height: calc(100% - 30px);
    width: auto;
    background-color: white;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: Black;
}

/*blue #0078d7 red #008a17 Gray #f2f2f2 #dedede green #91c181 LOGO blue #003994*/

/*Article Content*/

.Content .Article_Author {
    color: #003994;
}

.Content .Article_Title {
    text-align: center;
    font-family: 'Mongolian BiaoHei';
    border-right: 1px dotted #ccd7ea;
    padding: 0 10px;
    margin-left: 20px;
    margin-right: 10px;
    line-height: 1.2;
}

.Content .SubTitle {
    text-align: center;
    border-right: 1px dotted #ccd7ea;
    padding: 0 10px;
    margin-right: 10px;
}

.Content p {
    line-height: 36px;
    text-align: justify;
    text-indent: 2em;
    margin: 0;
    padding: 0;
}

.Content img, .img_border {
    max-height: calc(100% - 60px);
    width: auto;
    border: 5px solid #ccd7ea;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.Content .Info {
    margin-left: 10px;
    color: #979797;
}

@media (min-height: 780px) {
    .Content .Info {
        padding-top: 50%;
    }
}

@media (max-height: 780px) {
    .Content .Info {
        padding-top: 35%;
    }
}

@media (max-height: 480px) {
    .Content .Info {
        padding-top: 20%;
    }
}
.height-50 {
    height: calc(100% - 50px);
}
#ContentList fieldset {
    height: calc(100% - 30px);
    border: 1px solid #ccd7ea;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-right:10px;
}

#ContentList legend {
    background-color: #ccd7ea;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width:28px;
    line-height:28px;
}
    #ContentList legend a,
    #ContentList legend span {
        display: inline-block;
        width: 100%;
        padding: 20px 0;
        color: #002257;
    }

/*Class Article List*/
.Content,
.List,
#Music_List {
    height: 100%;
    width:auto;
    overflow:hidden;
}

    .List ol,
    #Music_List ol {
        list-style:none;
        height: 100%;
        width:auto;
        overflow:hidden;
        padding: 0;
        margin:0;
    }

    .List li,
    #Music_List li {
        z-index: 0;
        overflow: hidden;
        float: left;
        margin: 5px;
        list-style: none;
        position: relative;
        line-height: 1.2;
        padding: 10px 5px 5px 5px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px; /* Safari 4 and earlier */
        border-radius: 10px; /* Opera, Chrome, Safari 5, IE 9 */
        background-color: hsla(182,44%,76%,.5);
        word-wrap: break-word;
        -moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
        background-image: -moz-linear-gradient(left, hsla(0,0%,100%,.6), hsla(0,0%,100%,0) 30px);
        background-image: -webkit-gradient(linear, 0 50%, 100% 50%, from(hsla(0,0%,100%,.6)), to(hsla(0,0%,100%,0)));
    }

        .List li:hover,
        #Music_List li:hover {
            -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
        }

        .List li:hover {
            background-color: hsla(210,70%,82%,.5);
        }

    .List a {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        height: calc(100% - 10px);
        width: calc(100% - 5px);
        z-index: 2;
        padding-top: 10px;
        padding-left: 5px;
    }

    .List p {
        height: calc(100% - 10px);
        position: absolute;
        padding: 0;
        margin: 0;
        right: 3px;
        top: 1px;
        color: #99b0d4;
        z-index: 1;
    }

    .List b {
        display: inline-block;
        margin-top: 10px;
        height: calc(60% - 10px);
        font-weight: normal;
        z-index: 1;
        font-size: 90%;
    }

    .List I {
        font-family: Georgia;
        display: inline-block;
        margin-bottom: 10px;
        height: calc(40% - 10px);
        font-style: normal;
        text-align: right;
        z-index: 1;
        font-size: 75%;
    }

.singer-meta {
    padding-top: 10px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    height: 73px;
    font-size: 80%;
    z-index: 2;
}

    .audio_play:hover,
    .singer-meta:hover {
        background-color: hsla(210,70%,82%,.5);
    }

    .singer-meta img {
        width: 70%;
        height: auto;
        max-height: 70px;
        -moz-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    .singer-meta span {
        display: block;
        white-space:nowrap;
    }
.audio_play {
    z-index: 1;
    width: 100%;
    height: calc(100% - 85px);
    position: absolute;
    top: 85px;
    left: 0;
}

    .audio_play a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

.video_play {
    width: 100%;
    max-height: 60px;
    height:60px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}

    .video_play a {
        z-index: 2;
        display: inline-block;
        width: 100%;
        height: 100%;
        max-height: 70px;
    }

    .video_play img {
        width: 80%;
        height: auto;
    }

    .video_play a:hover {
        background-color: #ccd7ea;
    }

.songInfo p{
    text-indent:0;
}
.songInfo img {
    border:0;
}
#ulgerNum {
    height: 100%;
}

#pageN,
#PervNext {
    text-align: center;
    margin: 5px;
    width: 33px;
    font-family: 'Mongolian White';
    height: 100%;
}
    #pageN a,
    #pageN span,
    #PervNext a,
    #ulgerNum a,
    #ulgerNum span {
        display: inline-block;
        width: 30px;
        margin: 5px 0;
        line-height: 30px;
        text-decoration: none;
        border: 1px solid #ccd7ea;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.1);
        -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.1);
        box-shadow: 1px 1px 2px hsla(0,0%,0%,.1);
    }
    #pageN span {
        font-weight: bold;
        background-color: hsla(182,44%,76%,.5);
        background-image: -moz-linear-gradient(left, hsla(0,0%,100%,.6), hsla(0,0%,100%,0) 30px);
        background-image: -webkit-gradient(linear, 0 50%, 100% 50%, from(hsla(0,0%,100%,.6)), to(hsla(0,0%,100%,0)));
        color: #91c181;
    }
    #pageN a:hover,
    #PervNext a:hover,
    #ulgerNum a:hover, 
    #ulgerNum span {
        background-color: hsla(210,70%,82%,.5);
        background-image: -moz-linear-gradient(left, hsla(0,0%,100%,.6), hsla(0,0%,100%,0) 30px);
        background-image: -webkit-gradient(linear, 0 50%, 100% 50%, from(hsla(0,0%,100%,.6)), to(hsla(0,0%,100%,0)));
        font-weight: bold;
        -moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
    }
@media(max-height:490px) {
    #pageN a,
    #pageN span {
        height: calc(11.11% - 16px);
    }
}
@media(min-height:490px) {
    #pageN a,
    #pageN span {
        height: 30px;
    }
}
#PervNext a{
    height:100px;
}
#ulgerNum a, #ulgerNum span {
    display: inline-block;
    margin: 5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
@media (max-height:720px) {
    #ulgerNum a, #ulgerNum span {
        height: calc(33.33% - 20px);
    }
}

@media (max-height:540px) {
    #ulgerNum a, #ulgerNum span {
        height: calc(50% - 20px);
    }
}

@media (max-height:360px) {
    #ulgerNum a, #ulgerNum span {
        height: calc(100% - 20px);
    }
}


@media (min-height:720px) {
    #ulgerNum a, #ulgerNum span {
        height: calc(25% - 20px);
    }
}

@media (min-height:900px) {
    #ulgerNum a, #ulgerNum span {
        height: calc(20% - 20px);
    }
}

@media (min-height:1080px) {
    #ulgerNum a, #ulgerNum span {
        height: calc(16.66% - 20px);
    }
}

@media (min-height:1260px) {
    #ulgerNum a, #ulgerNum span {
        height: calc(13.33% - 20px);
    }
}
/*Singer Album Art Style*/
.picList,
.msList {
    height: 100%;
    width: auto;
    overflow: hidden;
}

    .picList ol,
    .msList ol {
        height: 100%;
        margin: 2px;
        padding: 0;
        overflow: hidden;
    }

    .picList li,
    .msList li {
        z-index: 0;
        overflow: hidden;
        float: left;
        margin: 10px;
        list-style: none;
        position: relative;
        line-height: 1.2;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px; /* Safari 4 and earlier */
        border-radius: 10px; /* Opera, Chrome, Safari 5, IE 9 */
        background-color: hsla(182,44%,76%,.5);
        word-wrap: break-word;
        -moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
        background: url("../Images/artbg.png");
        width:150px;
    }

        .picList li:hover,
        .msList li:hover,
        .magazineDiv:hover,
        .magazine_PhaseDiv:hover{
            -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
            background-color: hsla(210,70%,82%,.5);
        }

    .picList a,
    .msList a {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        width: 150px;
        height: 100%;
        z-index: 2;
    }

.musicDiv,
.ArtistDiv {
    font-size: 80%;
}

    .musicDiv span,
    .ArtistDiv span {
        display: block;
        text-align: center;
    }

    .musicDiv img,
    .ArtistDiv img {
        max-width: 82%;
        height: 100%;
    }
    #Music_List i, .musicDiv i, .List my-tags {
        z-index: 99;
        position: absolute;
        top: 0;
        right: 0;
        color: #ffa368;
    }
@media (min-height:750px) {
    .msList li, .picList li {
        height: calc(20% - 22px);
    }
}
@media (min-height:900px) {
    .msList li,
    .picList li {
        height: calc(16.66% - 22px);
    }
}

@media (min-height:1050px) {
    .msList li,
    .picList li {
        height: calc(13.33% - 22px);
    }
}

@media (min-height:1200px) {
    .msList li,
    .picList li {
        height: calc(12.5% - 22px);
    }
}

@media (min-height:1350px) {
    .msList li,
    .picList li {
        height: calc(11.11% - 22px);
    }
}

@media (min-height:1500px) {
    .msList li,
    .picList li {
        height: calc(10% - 22px);
    }
}

@media (max-height:750px) {
    .msList li,
    .picList li {
        height: calc(25% - 22px);
    }
}

@media (max-height:600px) {
    .msList li,
    .picList li {
        height: calc(33.33% - 22px);
    }
}

@media (max-height:450px) {
    .msList li,
    .picList li {
        height: calc(50% - 22px);
    }
}

@media (max-height:300px) {
    .msList li,
    .picList li {
        height: calc(100% - 22px);
    }
}

.magazineDiv{
    width: 300px;
    height: 200px;
}
.nomDiv {
    width: 240px;
    height: 240px;
}

.magazineDiv,
.magazine_PhaseDiv,
.nomDiv 
{
    float: left;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px; /* Safari 4 and earlier */
    border-radius: 10px; /* Opera, Chrome, Safari 5, IE 9 */
    background-color: hsla(182,44%,76%,.5);
    word-wrap: break-word;
    -moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
    -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
    box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
    background: url("../Images/artbg.png");
    margin: 5px;
    position: relative;
    overflow: hidden;
}
    .magazineDiv a,
    .magazine_PhaseDiv a,
    .nomDiv a{
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .magazineDiv img,
    .magazine_PhaseDiv img,
    .nomDiv img{
        max-width: 262px;
        height: 100%;
    }

    .magazineDiv span,
    .magazine_PhaseDiv span,
    .nomDiv span{
        display: block;
        text-align: center;
    }

.singerPic{
    height:100%;
    
}
    .singerPic img {
        margin: 0 5px;
        max-height: calc(100% - 10px);
        border: 5px solid #ccd7ea;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

.picBox {
    height: 100%;
}

    .picBox a {
        display: inline-block;
        height: calc(25% - 10px);
        width: 200px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px; /* Safari 4 and earlier */
        border-radius: 10px; /* Opera, Chrome, Safari 5, IE 9 */
        background-color: hsla(182,44%,76%,.5);
        word-wrap: break-word;
        -moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
        background: url("../Images/artbg.png");
        margin: 5px;
        overflow: hidden;
        padding-right: 3px;
        float: left;
        position: relative;
        text-align: left;
    }
        .picBox a:hover {
            -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
            background-color: hsla(210,70%,82%,.5);
        }
    .picBox a img{
        height:100%;
        width:auto;
        max-width:170px;
    }
        .picBox a span {
            display:inline-block;
            height:100%;
           text-align:center;
        }
@media (max-height:660px) {
    .picBox a {
        height: calc(33.33% - 10px);
    }
}

@media (max-height:500px) {
    .picBox a {
        height: calc(50% - 10px);
    }
}

@media (max-height:340px) {
    .picBox a {
        height: calc(100% - 10px);
    }
}

@media (min-height:660px) {
    .picBox a {
        height: calc(25% - 10px);
    }
}

@media (min-height:820px) {
    .picBox a {
        height: calc(20% - 10px);
    }
}

@media (min-height:980px) {
    .picBox a {
        height: calc(16.66% - 10px);
    }
}

@media (min-height:1140px) {
    .picBox a {
        height: calc(13.33% - 10px);
    }
}

.Link_List{
    height:100%;
}
.Link_List ol{
    height:100%;
    list-style:none;
    padding:0;
    margin:0;
}
    .Link_List li {
        list-style: none;
        position: relative;
        width: 60px;
        margin: 5px;
        padding:3px;
        float: left;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px; /* Safari 4 and earlier */
        border-radius: 10px; /* Opera, Chrome, Safari 5, IE 9 */
        background-color: hsla(182,44%,76%,.5);
        word-wrap: break-word;
        -moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
        box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
        background: url("../Images/artbg.png");
        overflow:hidden;
    }
        .Link_List li:hover {
            -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);
            box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); /* Opera, IE 9 */
            background-color: hsla(210,70%,82%,.5);
        }
.Link_List li a{
    display:block;
    height:100%;
    width:60px;
    position:absolute;
    top:3px;
    left:3px;
}
    .Link_List li a img,
    .Link_List li a span {
        display: block;
        margin: 3px;
        width: 54px;
        height: auto;
        max-height: calc(100% - 8px);
    }
@media (max-height:600px){
    .Link_List li {
        height: calc(50% - 16px);
    }
}
@media (max-height:440px) {
    .Link_List li {
        height: calc(100% - 16px);
    }
}
@media (min-height:600px) {
    .Link_List li {
        height: calc(33.33% - 16px);
    }
}

@media (min-height:800px) {
    .Link_List li {
        height: calc(25% - 16px);
    }
}

@media (min-height:1000px) {
    .Link_List li {
        height: calc(20% - 16px);
    }
}
@media (min-height:1200px) {
    .Link_List li {
        height: calc(16.66% - 16px);
    }
}

@media (min-height:1400px) {
    .Link_List li {
        height: calc(13.33% - 16px);
    }
}

@media (min-height:1600px) {
    .Link_List li {
        height: calc(12.5% - 16px);
    }
}

.cool-video {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    width:620px;
    max-height:100%;
    overflow:hidden;
}

    .cool-video video {
        width:600px ;
        max-width:100vw;
        height: 400px;
    }
.cool_play {
    position: fixed;
    bottom: 5px;
    left: 0;
    z-index: 999;
    height: 50px;
    width: 670px;
    max-width: 100%;
}
.android_video {
    height: 100%;
    width: 600px;
    max-width: 100vw;
}

.cool-audio {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    width: 600px;
    max-width: 100vw;
    height: 50px;
    position: fixed;
    bottom: 5px;
    left: 0;
}
    .cool-audio audio {
        width: 600px;
        max-width: 100vw;
        height: 50px;
    }

#songLyrics {
    margin-left: 30px;
    border-left: 1px solid #ccd7ea;
}
#songLyrics p {
    text-indent: 0;
    padding: 0;
    margin: 0;
}

/*search*/
.search_input, .search_redy {
    line-height: 50px;
    font-size: 32px;
}
    .search_input a:hover {
        color: #003994;
    }

    .search_input a, .search_redy span, .search_redy a {
        border: 1px solid #003994;
        padding: 5px 1px;
        margin: 10px;
        background-color: #91c181;
        color: #002257;
        display: block;
        float: left;
        text-align: center;
    }

    .search_input a, .search_redy span {
        height: 40px;
    }

    .search_redy a {
        height: 120px;
    }

    .search_redy span {
        background-color: #003994;
        color: White;
    }

.DropDownList span,
.DropDownList a{
    display: block;
    float: left;
    height: 150px;
    width: 30px;
    border: 1px solid #ccd7ea;
    text-align: center;
    padding: 1px;
    margin: 3px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px; /* Safari 4 and earlier */
    border-radius: 6px; /* Opera, Chrome, Safari 5, IE 9 */
}
.DropDownList a:hover {
    background-color: #ccd7ea;
}

.DropDownList span {
    background-color: #ccd7ea;
    color:red;
}

    .halfStyle {
    /*position: relative;*/
    display: inline-block;
    /*font-size:80px;  任何宽度都可以 */
    /* color: black; 任何颜色，或透明 */
    overflow: hidden;
    /*white-space: pre;  处理空格 */
}

    .halfStyle:before {
        display: block;
        z-index: 1;
        position: absolute;
        height: 50%;
        content: attr(data-content); /* 伪元素的动态获取内容 */
        overflow: hidden;
        color: #f00;
    }

#ReportErrors {
    text-align: right;
    margin: 0 20px;
    padding: 10px;
    border: 1px solid #dedede;
}
    #ReportErrors a, #ReportErrors b {
        display: inline-block;
        padding: 20px 0;
        margin: 5px;
        border: 1px solid #ccd7ea;
        background-color: #f2f2f2;
        overflow: hidden;
    }
        #ReportErrors a:hover, #ReportErrors b.commenting:hover {
            background-color: #dedede;
        }
        #ReportErrors a i, #ReportErrors b i, #Music_List i, .musicDiv i, .List my-tags {
            writing-mode: horizontal-tb;
            display: inline-block;
            width: 24px;
            height: 24px;
            /*float: left;*/
            text-align:center;
            margin-right:5px;
            margin-left:-5px;
        }
        #ReportErrors a span, #ReportErrors b span {
            padding: 3px;
            display: inline-block;
            width: 24px;
        }
    #ReportErrors b {
        font-weight:normal;
        color:#002257;
    }
        #ReportErrors b.commenting {
            cursor: pointer;
        }
.retrn_url {
    padding: 20px 0;
    margin: 5px;
    border: 1px solid #ccd7ea;
    background-color: #f2f2f2;
    overflow: hidden;
}

.single_box {
    border: 1px solid #f2f2f2;
    height: 100%;
    margin:0 10px;
}
    .single_box .spokesman {
        width: 24px;
        padding: 5px;
        background-color: #f2f2f2;
        height: calc(100% - 10px);
        color:#002257;
    }
    .single_box .spokesman b{
        font-weight:normal;
        display:inline-block;
    }
b.lft {
    float: left;
}
b.rit {
    float: right;
}
.single_box .spokesman b span {
    margin: 10px 0;
    display:inline-block;
}
.single_box .spokesman b i {
    writing-mode: horizontal-tb;
    display: inline-block;
    width: 24px;
    height: 24px;
    /*float:left;*/
    text-align: center;
    margin-right: 5px;
    margin-left: -5px;
}
.content_s {
    padding: 10px;
}
.ZeroSize{
    width:0;
    height:0;
    display:none;
}
.ISBNDiv {
    width: 30px;
    height: calc(100% - 300px);
    padding: 5px;
    /*display: table-cell;*/
    font-size: 120%;
    border: 1px solid #ccd7ea;
    box-shadow: 2px 2px 2px rgba(0,0,0,.1);
    float: left;
    margin-bottom: 10px;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.Com_Div {
    width: 100px;
    height: calc(100%- 20px);
    padding: 5px;
    font-size: 120%;
    border: 1px solid #ccd7ea;
    box-shadow: 2px 2px 2px rgba(0,0,0,.1);
    margin-bottom: 10px;
}
.Editor_LineDiv {
    width: 30px;
    height: calc(100%- 20px);
    padding: 5px;
    font-size: 120%;
    border: 1px solid #ccd7ea;
    box-shadow: 2px 2px 2px rgba(0,0,0,.1);
    margin-bottom: 10px;
}
.Editor_BigDiv {
    width: 500px;
    height: calc(100%- 20px);
    padding: 5px;
    font-size: 120%;
    border: 1px solid #ccd7ea;
    box-shadow: 2px 2px 2px rgba(0,0,0,.1);
    margin-bottom: 10px;
}
.floatLeft {
    float: left;
}
.nom_down_link a {
    display: inline-block;
    width: 24px;
    padding: 5px;
    height: 120px;
    margin: 0 5px;
    background-color: #f2f2f2;
    border: 1px solid #ccd7ea;
    text-align: center;
}
    .nom_down_link a:hover {
        background-color: #ccd7ea;
    }