*{margin: 0;padding: 0;box-sizing: border-box;}
a{text-decoration: none;}
li{list-style: none;}

/*播放页*/
.main{width: 100%;height:auto;margin: 0 auto;font-family: "微软雅黑";}


@media screen and (min-width:0) and (max-width: 250px) {
body{font-size: 8px;}
}
@media screen and (min-width:250px) and (max-width: 320px) {
body{font-size: 9px;}
}
@media screen and (min-width:320px) and (max-width: 550px) {
body{font-size: 10px;}
}
@media screen and (min-width:550px) and (max-width: 750px) {
body{font-size: 11px;}
}
@media screen and (min-width:750px) and (max-width: 1024px) {
body{font-size: 12px;}
}

.maintop{width: 100%;height:0;padding-bottom: 100%;position: relative;}
.mainimg img{width: 100%;height: 100%;}
.maintoptitle {
    width: 100%;
    height: 7.5em;
    line-height: 7.5em;
    text-align: center;
    background: #6b89d8;
    position: absolute;
    top: 0;
    border-bottom: 0.4em solid #065877;
}
.maintoptitle h3{color: #fff;font-size:1.5em;}
.maintoptitle p{display:block;width:6.5em;min-height:6.5em; position: absolute;left:0;top:0;margin-top: 0.5em;}
.maintoptitle p img{width: 60px;height: 60px;}
.maintoptitle i{display:block;width:7.5em;min-height: 7.5em; position: absolute;right:0;top:0;}
.maintoptitle i a{display: block;width:7.5em;min-height: 7.5em; background:url(../images/clean.png)no-repeat center center;}
.maintopbtn{display: block;width:35%;height:0;padding-bottom: 35%; border-radius:17.5%;position: absolute;left: 50%;top: 50%;margin-left: -17.5%;margin-top: -17.5%;}
.maintopbtn p a{position: absolute; z-index:999; display: block;width:60%;height:0;padding-bottom: 60%; border-radius:30%;opacity: 1;margin-top:82px;margin-left:20%;}
.maintopbtn:after{position: absolute;top:50px;left: -10px; content: "";display: block;width:100%;height:0;padding-bottom: 100%; border-radius:50%;border:10px solid #ff891d;opacity: 0.75;background: #fff;}
.maintopbtn .stop{background:url(../images/stop.png)no-repeat center center;background-size:cover;}
.maintopbtn .stop:hover{background:url(../images/play.png)no-repeat center center;background-size:cover;}
.maintopbtn .play{background:url(../images/play.png)no-repeat center center;background-size:cover;}
.maintopbtn .play:hover{background:url(../images/stop.png)no-repeat center center;background-size:cover;}

.mainbottom{width: 100%;min-height:auto;padding-top:92px;}
.mainbottomtitle{ height: 6em;line-height: 6em;background: #99abb1;margin:0.1em 0;position: relative;text-align: center;}
.mainbottomtitle span{font-size: 1.2em;vertical-align: middle;}
.mainbottomtitle .pbbefore{color: #fff;}
.mainbottomtitle .pbafter{color: #000;}
.mainbottomtitle  img{width: 60%;vertical-align: middle;display:inline-block;}
.mainimg{padding-top:92px;}

.mainbottomlist{width:100%;min-height:auto;background: #fff;overflow: hidden;text-align: center;margin-top: 7.5em;}
.mainbottomlist li{border-bottom: 1px solid #edf0f1;height:6em;line-height: 6em;width: 90%;margin-left: 5%;}
.mainbottomlist li a{color:#575858;height:4.5em;line-height:4.5em;width: 100%;display: block;font-size:1.5em;font-style: normal;}
.mainbottomlist li:hover a{color:#f15a22; }


.mainbottomsec:hover{background: #fff;}
.mainbottomsec:hover a{color:#f15a22;}
.mainbottomsec:active{background: #fff;}
.mainbottomsec:active a{color:#f15a22;}
.mainbottomsec{height: 6em;line-height: 6em; position: relative;padding-left:8em;background: #edf0f1;}
.mainbottomsec p{font-size:1.3em;}
.mainbottomsec p a{color:#323232;}
.mainbottomsec1{background: #fff;}
.mainbottomsec1 p a{color:#f15a22;}
.voiceplay{display: block;width:6em;height: 6em;line-height: 6em; position: absolute;left:2em;}
.voiceplay a{display: block;width:6em;height: 6em; background:url(../images/voice.png)no-repeat center center;}
.mainbottomfoot {
    height: 7em;
    line-height: 2.5em;
    text-align: center;
    background: #6b89d8;
    padding-top: 1em;
}
.mainbottomfoot span:first-child{color:#f15a22;font-size: 1.3em;display: block;}
.mainbottomfoot span a{color:#fff;}
.mainbottomfoot span{color:#fff;font-size: 1.3em;display: block;}
/*播放页*/












/* top
top */
.top {
    position: relative;
    width: 100%;
    background: #6b89d8;
    height: 100px;
    border-top: 4px solid #065877;
    border-bottom: 4px solid #065877;
    line-height: 92px;
    text-align: center;
    padding: 0 5%;
}

    .top h3 {
        color: #fff;
        font-size: 2em;
        display: inline;
        vertical-align: top;
    }

    .top .titlelogo {
        display: block;
        width: 18%;
        height: 92px;
        float: left;
        background-size: contain;
    }

.maincon {
    width: 100%;
    padding: 15px 10px;
    background: #d9dee0;
}

.playlist {
    width: 100%;
    min-height: 70px;
}

    .playlist li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #edf0f1;
        /*background: #edf0f1;*/
        /*background: url('../images/bg.png') no-repeat #edf0f1;*/
        /*background-size: 100% 100%;*/
    }

        .playlist li:last-child {
            border-bottom: none;
        }
        .playlist li span a {
            color: #000;
        }

        .playlist li i {
            margin-right: 10px;
            vertical-align: top;
            display: inline-block;
            width: 5%;
            height: 50px;
            background-size: contain;
        }

            .playlist li i a {
                display: block;
                width: 100%;
                height: 100%;
            }

        .playlist li span {
            font-size: 2em;
            font-family: "microsoft yahei"
        }

.footer {
    position: relative;
    width: 100%;
    height: 160px;
    padding: 45px 0;
    text-align: center;
    background: #6b89d8;
    border-top: 4px solid #065877;
}

    .footer p {
        line-height: 35px;
        color: #fff;
        font-family: "microsoft yahei";
        font-size: 1.5em;
    }

        .footer p a {
            color: #fff;
        }

.footerbg {
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 33px;
    background-size: 100%;
}



.jp-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    float: left;
    text-align: left;
    border: 1px solid #999;
}

.jp-seek-bar {
    text-align: left;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0 -105px;
    width: 0;
    height: 100%;
    cursor: pointer;
    background-color: #fff;
}

.jp-play-bar {
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0 -115px;
    width: 0;
    float: left;
    height: 100%;
    background-color: #6b89d8;
}

.playbar {
    position: relative;
    background-color: #ffd800;
    background-repeat: repeat-x;
    background-attachment: scroll;
    background-position: 0 -96px;
    margin-left: 10%;
    margin-top: 14px;
    width: 80%;
    height: 8px;
    float: left;
    /*margin: -10px 0 0 52px;*/
    display: inline;
    text-align: left;
}

.jp-current-time {
    width: 40px;
    position: absolute;
    height: 12px;
}

.jp-duration {
    width: 40px;
    float: right;
    height: 12px;
}