.serachbg{
    width:100%;height:100px;background:url(aaa.jpg) center center no-repeat;

}
/*搜索输入框*/
.home-search-wrap{
    width: 900px;
    height: auto;
    margin: 0 auto;
    padding-top: 15px;
}

.home-search-wrap .search-wrap-int{
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 2px solid #ff9100;
    position: relative;
}

.home-search-int{
    width: 820px;
    height: 40px;
    font-size: 14px;
    text-indent: 0px;
    color: #3A3A43;
    letter-spacing: 0.5px;
    border-radius: 4px;
    overflow: hidden;
}

.search-wrap-int .home-search-but{
    position: absolute;
    top: -1px;
    right: -1px;
    width: 80px;
    height: 42px;
        background: #ff9100;
    background: -moz-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0, #ffae12), color-stop(100%, #f07d17));
    background: -webkit-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -o-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -ms-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -webkit-gradient(linear, left top, right top, from(#ffae12), to(#f07d17));
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffae12), to(#f07d17));
    background: linear-gradient(to right, #ffae12 0, #f07d17 100%);
    /*background-image: linear-gradient(-90deg, #6A11CB 0%, #2575FC 100%);*/
    border-radius: 0 4px 4px 0;
    text-align: center;
    cursor: pointer;
}

.home-search-but > i {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #ffffff;
    line-height: 44px;
}

/*搜索热词*/
.home-search-wrap .search-wrap-his{
    height: 14px;
    line-height: 14px;
    margin-top: 12px;
}

.search-wrap-his>a{
    font-size: 13px;
    color: #68686D;
    margin-right: 16px;
}

.search-wrap-his>a:hover{
    color: #ff9100;
}

/*搜索下拉*/
.search-result-down {
    width: 820px;
    height: auto;
    background: #ffffff;
    box-shadow: 0 2px 6px 0 rgba(58, 58, 67, 0.1);
    position: absolute;
    top: 42px;
    left: 104px;
    padding: 16px 0 20px;
    display: none;
    z-index: 5;
}



/*分类页公共部分*/
.classify-public-wrap{
    width: 100%;
    height: auto;
  
}

.classify-public-wrap .classify-wrap-title{
    height: 30px;
    width: 100%;
}

.classify-wrap-title>span.research-count{
    margin-left: 20px;
}

.classify-wrap-title>span.research-count>em{
    color: #4236DD;
}

.classify-wrap-title>span{
    display: inline-block;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    color: #777777;
    vertical-align: top;
}

.classify-wrap-title .arrow-wrap{
    height: 100%;
    line-height: 26.5px;
    margin: 0 5px;
    display: inline-block;
    vertical-align: top;
}

.classify-wrap-title .arrow-wrap>i{
    font-size: 11px;
    color: #68686D;
}

.classify-wrap-title .classify-label{
    display: inline-block;
    vertical-align: top;
    height: 100%;
    padding: 0 10px 0 14px;
    border: 1px solid #E3E3E5;
    background-color: #FFFFFF;
    line-height: 28px;
    overflow: hidden;
    border-radius: 4px;
    font-size: 14px;
    color: #333443;
}

.classify-wrap-title .classify-label:hover{
    background: #F3F3F6;
}

.classify-wrap-title .classify-label .classify-name{
    float: left;
}

.classify-wrap-title .classify-label .icons-close-wrap{
    float: left;
}

.classify-wrap-title .classify-label>span>a{
    color: #333443;
}

.classify-wrap-title .classify-label .icons-close-wrap{
    width: 20px;
    line-height: 26.5px;
    height: 100%;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
}

.classify-label .icons-close-wrap>i{
    font-size: 12px;
    color: #68686D;
}

/*搜索框*/
.classify-wrap-title .wrap-title-input{
    width: 200px;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #C8C8D0;
    background-color: #FFFFFF;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.classify-wrap-title .wrap-title-input>input{
    width: 100%;
    height: 28px;
    font-size: 14px;
    color: #333443;
    text-indent: 12px;
    line-height: 28px;
    border-radius: 4px;
    overflow: hidden;
}

.classify-wrap-title .wrap-title-input .wrap-title-search{
    position: absolute;
    top: -1px;
    right: -1px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.wrap-title-search>i{
    display: block;
    font-size: 12px;
    color: #68686D;
}

.wrap-title-search:hover i{
    color: #4236DD;
}

/*标签*/
.classify-public-wrap .classify-wrap-label{
    width: 100%;
    height: auto;
    padding: 24px 30px 4px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #FFFFFF;
    margin-top: 15px;
}

.classify-wrap-label>div{
    height: auto;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

.wrap-label-child>span{
    float: left;
    display: block;
    height: 26px;
    line-height: 26px;
    color: #777781;
    font-size: 14px;
}

.wrap-label-child .right-wrap{
    float: left;
    overflow: hidden;
    margin-left: 0px;
    height: 26px;
    width: 1220px;
}

.wrap-label-child .right-wrap>a{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    line-height: 26px;
    border-radius: 2px;
    font-size: 14px;
    color: #232328;
    padding: 0 7px;
    float: left;
    margin: 0 2px;
    transition: 0s;
}

.wrap-label-child .right-wrap>a:hover{
    background: #ff9100;
    background: -moz-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0, #ffae12), color-stop(100%, #f07d17));
    background: -webkit-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -o-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -ms-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -webkit-gradient(linear, left top, right top, from(#ffae12), to(#f07d17));
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffae12), to(#f07d17));
    background: linear-gradient(to right, #ffae12 0, #f07d17 100%);
    color: #FFFFFF;
}

.wrap-label-child .right-wrap>a.label-active{
    background: #ff9100;
    background: -moz-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -webkit-gradient(linear, left, right, color-stop(0, #ffae12), color-stop(100%, #f07d17));
    background: -webkit-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -o-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -ms-linear-gradient(left, #ffae12 0, #f07d17 100%);
    background: -webkit-gradient(linear, left top, right top, from(#ffae12), to(#f07d17));
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffae12), to(#f07d17));
    background: linear-gradient(to right, #ffae12 0, #f07d17 100%);
    color: #FFFFFF;
}

.wrap-label-child .more-btn{
    position: absolute;
    top: 0;
    right: 0;
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    color: #232328;
    cursor: pointer;
}

.wrap-label-child .more-btn>a{
    color: #232328;
    display: block;
    height: 100%;
    /*background:url(icon_open.png) right center no-repeat;padding-right:20px;*/
}

.wrap-label-child .more-btn>a.close{
    color: #232328;
    display: block;
    height: 100%;
    /*background:url(icon_backtop.png) right center no-repeat;padding-right:20px;*/
}


.wrap-label-child .more-btn:hover a,.wrap-label-child .more-btn:hover i{
    color: #ff9100;
}

.wrap-label-child .more-btn>i{
    display: block;
    font-size: 12px;
    color: #68686D;
    -webkit-transition: -webkit-transform ease .3s;
    transition: -webkit-transform ease .3s;
    -o-transition: transform ease .3s;
    transition: transform ease .3s;
    transition: transform ease .3s, -webkit-transform ease .3s;
}

.wrap-label-child .more-btn>i.icon-xuanzhuan {
    transform: rotate(180deg);
}

.wrap-label-child .right-wrap-more{
    height: auto;
}

.wrap-label-child .right-wrap-more>a{
    margin-bottom: 10px;
}

/*关键词关联查找*/
.classify-wrap-label .classify-wrap-find{
    height: 54px;
    width: 100%;
    font-size: 14px;
    line-height: 54px;
}

.classify-wrap-find>span{
    display: block;
    line-height: 54px;
    height: 100%;
    font-size: 14px;
    color: #95959E;
    margin-right: 20px;
}

.classify-wrap-find>a{
    display: block;
    height: 100%;
    line-height: 54px;
    color: #68686D;
    font-size: 14px;
    margin-right: 20px;
}

.classify-wrap-find>a:hover{
    color: #4236DD;
}

/*综合排序*/
.classify-sort-wrap{
    width: 100%;
    height: 34px;
    margin: 10px auto 0;
}

.classify-sort-wrap>a{
    display: block;
    height: 100%;
    line-height: 34px;
    font-size: 14px;
    color: #232328;
    padding: 0 16px;
    float: left;
    text-align: center;
    margin-right: 6px;
}

.classify-sort-wrap>a:hover{
    color: #ff9100;
}

.classify-sort-wrap>a.sort-active{
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #ff9100;
    line-height: 30px;
    color: #ff9100;
}

.body-main .classify-wrap .home-classify-wrap{
    padding-top: 0;
}

.classify-wrap .home-classify-wrap .home-classify-list{
    height: auto;
}

.classify-wrap .home-classify-wrap .home-classify-list>li{
    margin-bottom: 15px;
}

/*多媒体不同样式*/
#multi-classify .home-classify-list{
    height: auto;
}

/*当前位置为插画配图、音效的时候*/
/*下拉*/
.classify-wrap-title .position-change{
    width: 70px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #E3E3E5;
    background-color: #FFFFFF;
    overflow: hidden;
    position: relative;
    display: inline-block;
    z-index: 2;
    vertical-align: top;
}

.classify-wrap-title .position-change-auto{
    height: auto;
}

.position-change>p{
    display: block;
    width: 100%;
    line-height: 28px;
    font-size: 14px;
    color: #333443;
    padding-left: 14px;
    cursor: pointer;
}

.position-change>p:hover{
    color: #4236DD;
}

.position-change>i{
    display: inline-block;
    top: 0;
    right: 0;
    top: 4px;
    right: 6px;
    position: absolute;
    font-size: 18px;
    color: #68686D;
    -webkit-transition: -webkit-transform ease .2s;
    transition: -webkit-transform ease .2s;
    -o-transition: transform ease .2s;
    transition: transform ease .2s;
    transition: transform ease .2s, -webkit-transform ease .2s;
}

.position-change>i.icon-zhuan{
    transform: rotate(180deg);
}

/*音乐分类页样式*/
#music-classify .home-classify-list{
    height: auto;
    width: 100%;
}

#music-classify .home-classify-list>li{
    height: 192px;
    background-color: #FFFFFF;
    padding: 20px 0 20px 20px;
}

.home-classify-list .souse-img {
    width: 96px;
    height: 96px;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    float: left;
    box-shadow: 0 6px 20px 0 rgba(58,58,67,0.5);
    cursor: pointer;
}
.home-classify-list .souse-img>img{
    position: absolute;
    top: -100%;
    left: -130%;
}

/*中心白圆*/
.souse-img::before {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}

.souse-img img {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-border-radius: 100%;
    border-radius: 100%;
}

.start-rotate img {
    -webkit-transform: rotate(360deg);
    animation: rotation 20s linear infinite;
    -moz-animation: rotation 20s linear infinite;
    -webkit-animation: rotation 20s linear infinite;
    -o-animation: rotation 20s linear infinite;
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/*配乐详情下载*/
.home-classify-list .audio-info {
    width: 205px;
    padding-left: 26px;
    float: left;
}

.audio-info .audio-name {
    color: #3A3A43;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    margin-bottom: 4px;
    margin-top: 8px;
    line-height: 16px;
    display: block;
}

.audio-info span {
    color: #95959E;
    font-size: 12px;
    line-height: 14px;
}

.audio-info .free-down {
    width: 130px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #fff;
    display: block;
    border-radius: 4px;
    margin-top: 18px;
    float: left;
    position: relative;
    -webkit-filter: none\9 \0;
    filter: none\9 \0;
    -ms-filter: none\9 \0;
    background-color: #ff9100;
}

.audio-info .free-down:hover {
    background-color: #483BE9;
}

.audio-info .icon-shoucang-mian {
    display: block;
    width: 36px;
    height: 36px;
    border: 1px solid #E7E8EC;
    border-radius: 4px;
    overflow: hidden;
    float: left;
    margin-top: 18px;
    margin-left: 10px;
    text-align: center;
    line-height: 36px;
    text-indent: 1.5px;
    color: #C8C8D0;
    cursor: pointer;
    background-color: #FFFFFF;
}


/*播放进度条*/
.audio-box {
    position: relative;
    height: auto;
    padding-top: 24px;
    float: left;
}

.audio-box .icon-bofang {
    color: #68686D;
    font-size: 24px;
    cursor: pointer;
    padding-left: 16px;
    float: left;
}

.audio-box .star-time {
    float: left;
    color: #68686D;
    margin-left: 14px;
    margin-right: 12px;
    font-size: 12px;
    margin-top: 4px;
}

.audio-box .time-bar {
    position: relative;
    float: left;
    width: 149px;
    height: 24px;
    background-color: #95959E;
    z-index: 1;
    cursor: pointer;
}

.time-bar img {
    position: absolute;
    z-index: 3;
}

.time-bar .move-color {
    display: block;
    width: 0;
    height: 24px;
    background-color: #ff9100;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}

.audio-box .end-time {
    float: left;
    color: #68686D;
    margin-left: 12px;
    font-size: 12px;
    margin-top: 4px;
}

.audio-box .timeTip {
    position: absolute;
    top: 5px;
    left: 0;
    z-index: 3;
    width: 40px;
    text-align: center;
    font-size: 12px;
    color: #ff9100;
}

/*添加类名*/
/*使其旋转*/
.start-rotate.running img {
    animation-play-state: running;
    -webkit-animation-play-state: running
}

/*旋转动画*/
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}


/*搜索无结果页面展示*/
.search-result-not{
    width: 100%;
    height: auto;
}



.search-result-not>span{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: #68686D;
    margin-bottom: 10px;
}

.search-result-not>span>em{
    font-weight: normal;
    color: #4236DD;
}

.search-result-not>p{
    display: block;
    text-align: center;
    font-size: 16px;
    color: #68686D;
}



    .wrap-label-child .right-wrap{
        width: 1075px;
    }

    .classify-wrap .home-classify-wrap .home-classify-list li:nth-child(4n){
        margin-right: 0;
    }

    #music-classify .home-classify-list>li{
        padding-left: 14px;
        padding-top: 14px;
        padding-bottom: 0;
        height: 160px;
    }

    .home-classify-list .audio-info {
        width: 170px;
        padding-left: 14px;
    }

    .audio-info .free-down {
        width: 106px;
        margin-top: 10px;
    }

    .audio-info .audio-name{
        margin: 2px 0;
        font-size: 13px;
    }

    .audio-info .icon-shoucang-mian{
        margin-top: 10px;
        margin-left: 8px;
    }

    .audio-box .icon-bofang{
        font-size: 22px;
        padding-left: 2px;
    }

    .audio-box .star-time{
        margin: 4px 9px 0;
    }

    .audio-box .end-time{
        margin-left: 9px;
    }

    .audio-box{
        padding-top: 15px;
    }

    .audio-box .timeTip {
        top: -2px;
    }

    /*样机响应式*/
    .jump-details-media{
        height: 430px;
    }

    .media-jump-details{
        width: 200px;
        height: 135px;
        margin: 68px auto 0;
    }

    .media-details-img{
        width: 135px;
        height: 135px;
    }

    .media-details-img>img{
        left: -70%;
    }

    .media-details-cd{
        width: 125px;
        height: 125px;
        top: 5px;
    }

    .media-details-headset{
        width: 52px;
        height: 52px;
        margin: 38px auto;
    }

    .media-details-wave{
        height: 60px;
    }