.pageHead { display: flex; padding: 0px 0px; width: calc( 100% - 200px); justify-content: space-between; margin: 20px 100px; box-sizing: border-box; border-bottom: solid 1px #ccc; }



.l_index_music { display: flex; flex-direction: column; padding: 0 100px; }

/*-----------------filter------Start-----------*/
.filterContainer { width: 524px; height: 150px; position: relative; background-color: var(--SecondaryColor); padding: 16px 20px; box-sizing: border-box; border-radius: 8px 8px 0px 0px; margin-left: 20px; border: 1px solid #ccc; border-bottom: none; }
    .filterContainer:after { content: "条件搜索"; position: absolute; top: -0.75em; left: 1em; width: 5em; height: 1.5em; line-height: 1.5em; text-align: center; }
    .filterContainer:before { content: ""; position: absolute; top: -1px; left: 1em; width: 5em; height: 1px; background-color: #e1e1e1; }
    .filterContainer .s_1 { display: flex; }
    .filterContainer .s_2 { display: flex; margin-top: 4px; }
    .filterContainer .s_2_l { flex: 1; }
    .filterContainer .s_2_r { width: 90px; display: flex; align-items: center;flex-direction:column;justify-content:space-around; }
    .filterContainer .s_3 { display: flex; }
    .filterContainer .s_3_l { flex: 1; display: flex; }
    .filterContainer .s_3_r { width: 160px; }

    .filterContainer .filterMusicName { height: 2em; line-height: 2em; display: flex;width:100%; font-size:14px;}
        .filterContainer .filterMusicName input { border: solid 1px #ccc; outline: none; flex: 1; padding: 0px 5px; box-sizing: border-box;font-size:14px; }


.filterBtn { display: flex; align-items: flex-end; justify-content: flex-end; position: absolute; bottom: 10px; right: 20px; }
    .filterBtn .btnSearch { width: 47px; height: 2em; line-height: 2em; text-align: center; background-color: black; border-radius: 4px; position: relative; cursor: pointer; color: white; }

    .filterBtn .btnClearSearch { color: #aaa; cursor: pointer; margin-left: 20px; }
/*-----------------filter------End-----------*/
/*-----------------MusicTag------Start-----------*/
.tagListContainer { display: flex; align-items: center; }
    .tagListContainer:before { content: "标签:"; width: 44px; }

    .tagListContainer .tagClassItemContainer { flex: 1; display: flex; justify-content: flex-start;flex-wrap:wrap; }
    .tagListContainer .tagClassItem { padding: 0px 5px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .tagListContainer .tagClassItem.slctd { background-color: #ddd; }
        .tagListContainer .tagClassItem .tagClass { width: 100%; text-align: center; display: inline-block; height: 2em; line-height: 2em; color: var(--PrimaryColor); }

        .tagListContainer .tagClassItem .subTags { list-style: none; margin: 0; padding: 0; position: absolute; top: 7px; left: 0px; background: #eeeeee; width: 100%; height: calc(100% - 8px); z-index: 3; display: flex; flex-direction: column; box-sizing: border-box; padding: 10px 10px; }

    .tagListContainer ul li { box-sizing: border-box; padding: 5px 15px 5px 15px; height: 3em; display: inline-flex; justify-content: center; align-items: center; }
        .tagListContainer ul li:hover { background-color: wheat; }
        .tagListContainer ul li.slctd { background-color: wheat; }
        .tagListContainer ul li .tagID { display: none; }
        .tagListContainer ul li .tagName { display: inline-block; vertical-align: middle; }

.cbxAll { }
    .cbxAll span { color: var(--PrimaryColor2); }
    .cbxAll input { cursor: pointer; vertical-align: middle; }
.cbxContAllKeywords { }
    .cbxContAllKeywords span { color: var(--PrimaryColor2); }
    .cbxContAllKeywords input { cursor: pointer; vertical-align: middle; }


.selectedTagContainer { flex: 1; display: flex; flex-wrap: wrap; overflow-y: auto; height: 50px; }
    .selectedTagContainer .slctdTag { position: relative; margin-top: 2px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; padding: 2px 20px 2px 4px; height: 22px; }

        .selectedTagContainer .slctdTag .btnDeleteTag { cursor: pointer; display: inline-block; vertical-align: middle; position: absolute; right: 2px; top: 2px; }
            .selectedTagContainer .slctdTag .btnDeleteTag svg { width: 16px; height: 16px; fill: black; }
/*-----------------MusicTag------End-----------*/




/*-----------------effectItem------Start-----------*/
.effectItemContainer { flex: 1; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.effectItem { background-color: #eee; border-radius: 8px; width: 200px; height: 200px; flex-basis: 30%; margin-top: 20px; box-sizing: border-box; padding: 20px; margin-left: 5%; }
    .effectItem:nth-child(3n+1) { margin-left: 0; }
    .s_ei_1 { height: auto; display: flex; }
    .s_ei_1 .s_ei_1_l { flex: 1; }
    .s_ei_1 .s_ei_1_r { display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
.s_ei_2 { height: 40px; overflow: hidden; display: flex; }
.s_ei_3 { height: 60px; display: flex; justify-content: space-between; align-items: center; }



.effectItem .effName { font-size: 18px; font-weight: bold;height:48px;overflow:auto; }
.effectItem .effTag { color: #ccc; font-size: 14px; }


.effectItem .waveContainer { flex: 1; overflow: hidden; width: 300px; height: 40px; position: relative; }
    .effectItem .waveContainer .waveProgress { height: 40px; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.3); }
    .effectItem .waveContainer .WaveImg { width: 100%; height: 40px; position: absolute; top: 0; left: 0; }
    .effectItem .waveContainer .waveform { width: 100%; height: 40px; position: absolute; top: 0; left: 0; }

.effectItem .collectionContainer { cursor: pointer; width: 32px; height: 32px; }
    .effectItem .collectionContainer svg { fill: #e1e1e1; transition: all linear 200ms; }
    .effectItem .collectionContainer[HasCollect=true] svg { fill: #feb370; }

.effectItem .bpmtimes { width: 100px; text-align: center; }
.effectItem .btnDownload { width: 20px; height: 20px; background-image: url('../../Imgs/Common/icon_masterDownload_hover.png'); background-repeat: no-repeat; background-size: cover; }
.effectItem .btnPlay { width: 40px; height: 40px; background-repeat: no-repeat; background-size: cover; }
.effectItem .statePlay { background-image: url('../../Imgs/Common/play.png'); }
.effectItem .stateStop { background-image: url('../../Imgs/Common/pause.png'); }
/*-----------------effectItem------End-----------*/
/*-----------------music------Start-----------*/


.BPM:before { content: "BPM:"; color: #999 }

.btnDownload { cursor: pointer; }

.btnPlay { cursor: pointer; }


.channelTagContainer { display: flex; flex-direction: column; justify-content: space-between; margin-left: 20px; width: 100px; }
    .channelTagContainer .musicTag { color: #ccc; margin-top: 10px; }
.open .tagItemsListContainer { width: 180px }

.loadmore { text-align: center; color: #aaa; cursor: pointer; margin: 20px 0px; }
/*-----------------music------End-----------*/



/*-----------------FilterMusic------Start-----------*/
.filterMusicContainer { box-sizing: border-box; padding-left: 50px; margin-top: 40px; flex: 1; overflow: hidden; }


/*-----------------FilterMusic------End-----------*/



.tagItemsListContainer { width: 0px; height: 0px; display: inline-flex; vertical-align: top; margin-left: 10px; flex-direction: column; box-sizing: border-box; padding: 10px; }
.open .tagItemsListContainer { width: 180px }
.fix .tagItemsListContainer { position: fixed; left: 282px; top: 0px; }
.tagItemsListContainer .tagItem { cursor: pointer; }