.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: row !important; padding: 0 100px; }


/*-----------------MusicTag------Start-----------*/
.tagListContainer { display: flex; align-items: center; }
    .tagListContainer:before { content: "标签:"; width: 44px; }

    .tagListContainer .tagClassItemContainer { flex: 1; display: flex; justify-content: flex-start; }
    .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; }


.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-----------*/


/*-----------------ToTop------Start-----------*/
.l_index_toTop { width: 50px; height: 50px; position: fixed; bottom: 70px; left: 120px; cursor: pointer; display: none; }
    .l_index_toTop svg { fill: #ccc; }
/*-----------------ToTop------End-----------*/


/*-----------------SearchContainer------Start-----------*/


.SearchContainer{display:flex;justify-content:center;align-items:center;width:100%;}
    .SearchContainer .iptKeyWord { flex: 1; outline: none; border: 1px solid var(--PrimaryColor); font-size: 18px; height: 2em; line-height: 2em;margin:0px 30px; box-sizing:border-box;padding:0px 6px;}
.SearchContainer .btnSearch {width:5em;height:2em;line-height:2em; background-color:var(--PrimaryColor); color:white; font-size:18px; border-radius:4px;text-align:center;cursor:pointer;}



/*-----------------SearchContainer------End-----------*/
/*-----------------music------Start-----------*/
.musicItem { display: flex; align-items: center; justify-content: space-between; }

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

.btnDownload { cursor: pointer; }

.btnPlay { cursor: pointer; }

.musicContainer { box-sizing: border-box; padding-left: 50px; margin-top: 40px; flex: 1; overflow: hidden; }
.musicItem { width: 100%; display: flex; }
    .musicItem:not(:first-child) { margin-top: 20px; }

    .musicItem .ThumbnailContainer { width: 100px; height: auto; margin-right: 30px; }
        .musicItem .ThumbnailContainer .Thumbnail { width: 100%; height: auto; }


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

    .musicItem .MusicName { width: 100px; position: relative; }
        .musicItem .MusicName [isnew=true] { width: 30px; height: 20px; position: absolute; top: -20px; left: -16px; display: block !important; fill: var(--PrimaryColor); transform: rotate(-15deg); }

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

.musicItem .channel { width: 120px; text-align: center; color: #999; overflow: hidden; }
.musicItem .bpmtimes { width: 100px; text-align: center; }
.musicItem .btnDownload { width: 20px; height: 20px; background-image: url('../../Imgs/Common/icon_masterDownload_hover.png'); background-repeat: no-repeat; background-size: cover; }
.musicItem .btnPlay { width: 40px; height: 40px; background-repeat: no-repeat; background-size: cover; }
.musicItem .statePlay { background-image: url('../../Imgs/Common/play.png'); }
.musicItem .stateStop { background-image: url('../../Imgs/Common/pause.png'); }

.musicItem .downloadCopyRightContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.musicItem .CopyRightTag { margin-top: 10px; width: 80px; display: flex; justify-content: center; }
    .musicItem .CopyRightTag[CopyRightTag*="CC"] .CC { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="BY"] .BY { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="SA"] .SA { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="NC"] .NC { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="ND"] .ND { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag*="CC0"] .CC0 { display: inline-block !important; }
    .musicItem .CopyRightTag[CopyRightTag="License"] .License { display: inline-block !important; }
    .musicItem .CopyRightTag .License { display: inline-block; width: 60px; border: solid 1px var(--PrimaryColor); border-radius: 4px; padding: 2px 4px; box-sizing: border-box; text-align: center; color: var(--PrimaryColor); height: 24px; line-height: 18px; }
        .musicItem .CopyRightTag .License a { color:var(--PrimaryColor);}


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

.musicItem .CopyRightTag > div { width: 16px; height: 16px; }
    .musicItem .CopyRightTag > div svg { fill: #ccc; }
        .musicItem .CopyRightTag > div svg path { stroke: #ccc; }

.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: 100px; 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; }


/*-----------------carousel------Start-----------*/

/*外部的父元素*/
.advContainer { flex:1;overflow:hidden; box-sizing: border-box;border-top-left-radius:8px;border-top-right-radius:8px; }

/*整个容器*/
.con_carousel { position: relative; overflow: hidden; }
    /*图片的容器（可移动的容器）*/
    .con_carousel > .carousel_img { width: 1000%; height:150px; background-color: white; white-space: nowrap; overflow: hidden; position: relative; font-size: 0; left: 0px; }
        /*每一个移动对象*/
        .con_carousel > .carousel_img a { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: cover; height: 100%; text-align: center; }
    /*标识对应移动对象的小圆点的容器 （bottom: 5px;设置了距离整个容器底部的距离）*/
    .con_carousel > .carousel_flag { position: absolute; text-align: center; bottom: 5px; width: 100%; padding: 0; margin: 0; box-sizing: border-box; font-size: 0; }
        /*每一个小圆点（这里设置成了圆形border-radius: 100%;） */
        .con_carousel > .carousel_flag span { display: inline-block; width: 8px; height: 8px; background-color: white; opacity: 0.8; border-radius: 100%; cursor:pointer;}
            /*设置小圆点的间距*/
            .con_carousel > .carousel_flag span:not(:last-child) { margin-right: 10px; }
            /*设置选中的小圆点的样式*/
            .con_carousel > .carousel_flag span.selected { background-color:var(--PrimaryColor); }

/*-----------------carousel------End-----------*/

/*-----------------carousel中的item------Start-----------*/

.carouselItem { position:relative;overflow:hidden;}

    .carouselItem .ChannelImg { width: 100%; height: 100%; background-size: cover; background-position: center;background-color:rgba(0,0,0,0.5); }
        .carouselItem .ChannelImg .imgShadow {position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5); }
        .carouselItem .ChannelImg .ChannelName { position: absolute; width: 100%; height: 1.5em; font-size: 12px; text-align: center; top: 20px;color:white; }
        .carouselItem .ChannelImg .Description { position: absolute; width: 100%; height: calc(100% - 50px - 1.5em); font-size: 12px; text-align: center; bottom: 20px; color: white; white-space: pre-line;overflow:hidden; padding: 0px 90px; box-sizing: border-box; }

        .carouselItem .ChannelImg .musicianContainer { width: 50px; height: 50px; position: absolute; left: 20px; top: 20px; border-radius: 100%; }
            .carouselItem .ChannelImg .musicianContainer .HeadImg { width: 100%; height: 100%; border-radius: 100%; }
            .carouselItem .ChannelImg .musicianContainer .MusicianName { position: absolute; left: 0px; bottom: -24px; width: 50px; height: 1.5em; display: inline-block; font-size: 12px; font-weight: bold; color: var(--PrimaryColor); }


/*-----------------carousel中的item------End-----------*/