.l_01_middle { }

    .l_01_middle > div { }


/*-----------------music------Start-----------*/

.musicControlContainer { margin: 0 auto; margin-top: 30px; margin-bottom: 10px; display: flex; width: 100px; justify-content: space-around; align-items: center; }

.showBtnPlayTrack .musicControlContainer { width: 260px; }
.showBtnPlayTrack [hasRight="true"] .btnPlayTrack { display: block !important; }

.btnPlay { width: 40px; height: 40px; background-repeat: no-repeat; background-size: cover; cursor: pointer; }
.statePlay { background-image: url('../../Imgs/Common/play.png'); }
.stateStop { background-image: url('../../Imgs/Common/pause.png'); }
.btnStop { width: 40px; height: 40px; background: no-repeat center url('../../Imgs/Common/stop.png'); cursor: pointer; }

.btnPlayTrack { height: 40px; width: 7em; text-align: center; line-height: 38px; cursor: pointer; box-sizing: border-box; border-radius: 8px; border: 1px solid #ccc; margin-left: 40px; }
.statePlayTrack { color: white; background-color: var(--PrimaryColor); border-color: var(--PrimaryColor); }

.btnBundleDownload { width: 20px; height: 20px; cursor: pointer; fill: #F83D1E; margin-left: 20px; }
.showBtnPlayTrack [hasRight="true"] .btnBundleDownload { display: block !important; }

.btnPayTrack { width: 130px; height: 40px; margin-left: 40px; display: none; justify-content: center; align-items: center; border-radius: 8px; color: white; background-color: var(--PrimaryColor); cursor: pointer; position: relative; }
    .btnPayTrack:before { content: "获取分轨：￥" }
.showBtnPlayTrack [hasRight="false"] .btnPayTrack { display: flex; }

.payInfo { width: 12px; height: 12px; position: absolute; fill: var(--PrimaryColor); right: -14px; top: 0px; }


.musicTrackContainer { padding: 0px 0px; }
    .musicTrackContainer .mBefore { width: 120px;text-align:center; }
    .musicTrackContainer .mAfter { width: 120px; text-align: center; }

.musicContainer { box-sizing: border-box; padding: 0px 100px; }


.masterContainer { box-sizing: border-box; }

.showBtnPlayTrack .masterContainer { border-bottom: 2px solid #ccc; }
.musicItem .musicWaveTime { display: flex; justify-content: space-evenly; align-items: center; }

.musicItem { width: 100%; margin-top: 8px; position: relative; }
    .musicItem:not(:first-child) { margin-top: 20px; }
    .musicItem .waveContainer { flex: 1; overflow: hidden; margin: 0 20px; width: 800px; height: 100px; position: relative; }
        .musicItem .waveContainer .waveProgress { height: 100px; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,0.6); 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 .channel { text-align: center; color: #999; display: block; margin: auto; }
    .musicItem .MusicName { width: 100%; font-size: 24px; font-weight: bold; position: relative; text-align: center; flex-direction: column; align-items: center; margin-top: 2px; }
    .musicItem .musicTag { color: #666; text-align: center; margin: auto; font-size: 14px; }
    .musicItem [isnew=true] { width: 50px; height: 30px; position: absolute; top: -14px; left: 0px; display: block !important; fill: var(--PrimaryColor); transform: rotate(-15deg); }






    .musicItem .descriptionCopyright { display: flex; justify-content: space-between; }
        .musicItem .descriptionCopyright .copyRightContainer { position: relative; border: 1px dashed #ccc; border-radius: 8px; box-sizing: border-box; padding: 15px; margin-top: 8px; }

    .musicItem .btnCopyCopyRight { width: 16px; height: 16px; fill: #999; cursor: pointer; position: relative; }
        .musicItem .btnCopyCopyRight:after { content: attr(msg); position: absolute; left: -46px; width: 50px; color: #999; }
    .musicItem .CopyRightTitleContainer { display: flex; align-items: center; }
    .musicItem .CopyRightTag { display: flex; flex: 1; }
        .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 > div { width: 16px; height: 16px; }
            .musicItem .CopyRightTag > div svg { fill: #ccc; }
                .musicItem .CopyRightTag > div svg path { stroke: #ccc; }


    .musicItem .AuthorBPMContainer { width: 100%; display: flex; justify-content: space-between; }

    .musicItem .BPM { }
        .musicItem .BPM:before { content: "BPM："; color: #999 }
    .musicItem .TrackCount { }
        .musicItem .TrackCount:before { content: "分轨："; color: #999 }
    .musicItem .Author:before { content: "作者："; color: #999 }
    .musicItem .Description { white-space: pre-line; height: 130px; overflow-y: auto; margin: 14px 0px 8px 0px; background-color: #eee; padding: 1em; border-radius: 4px; box-sizing: border-box; width: 100%; }

    .musicItem .btnDownloadCollectContainer { width: 100%; display: flex; justify-content: space-between; align-items: center; }
        .musicItem .btnDownloadCollectContainer .btnBuyLicense { box-sizing: border-box; text-align: center; background-color: var(--PrimaryColor); color: white; border-radius: 4px; padding: 4px 6px; cursor: pointer; }

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

        .musicItem .btnDownloadCollectContainer .btnDownload { cursor: pointer; width: 20px; height: 20px; background-image: url('../../Imgs/Common/icon_masterDownload_hover.png'); background-repeat: no-repeat; background-size: cover; }

.trackBlock { display: flex; align-items: center; }
    .trackBlock .trackName {overflow:hidden; display: flex; justify-content: flex-start; align-items: center; height: 50px; text-align: center; cursor: pointer; border: solid 1px #ccc; color: #ccc; fill: #ccc; border-radius: 8px; box-sizing: border-box;padding:0 10px; }
    .trackBlock .stateNotMute { color: white; fill: white; background-color: violet; border-color: violet; }
    .trackBlock .waveContainer { flex: 1; }
        .trackBlock .waveContainer .TrackWaveImg { width: 100%; height: 100px; position: absolute; top: 0; left: 0; }
/*-----------------music------End-----------*/
.quote { position: relative; width: 100%; background-color: #eee; z-index: 10; padding: 30px 20px 50px 20px; box-sizing: border-box; margin-top: 40px; }
    .quote .iptQuote { width: 100%; height: 50px; }
        .quote .iptQuote textarea { width: 100%; height: 50px; border: none; outline: none; box-sizing: border-box; }
    .quote .btnSaveQuote { position: absolute; right: 0px; bottom: -40px; width: 70px; height: 2.7em; line-height: 2.7em; text-align: center; color: white; background-image: linear-gradient(#feb370,#fc6a11, #f61f17); cursor: pointer; border-radius: 8px; }
    .quote .btnCloseQuote { position: absolute; right: 12px; top: 12px; width: 12px; height: 12px; background-image: url('../../Imgs/Common/delete2.png'); background-repeat: no-repeat; background-size: cover; cursor: pointer; }
    .quote .titleAddQuote { position: absolute; left: 0px; top: -24px; }

    .quote .quoteItemContainer { position: relative; }
        .quote .quoteItemContainer:not(:first-child) { margin-top: 40px; }
        .quote .quoteItemContainer .quoteContent { }
            .quote .quoteItemContainer .quoteContent iframe { height: 300px; width: 600px; }
        .quote .quoteItemContainer .quoteCreateTime { position: absolute; bottom: 0px; right: 0px; }
        .quote .quoteItemContainer .quoteDisplayName { position: absolute; bottom: 20px; right: 0px; }

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


/*---------------------------------*/

.l_leftRight { display: flex; overflow: hidden; justify-content: space-between; margin-top: 15px; }

.l_left { width: 356px; }

.l_middle { height: 200px; flex: 1; display: flex; flex-direction: column; align-items: center; margin: 0px 30px; }

.l_right { width: 356px; display: flex; justify-content: space-between; }




.ThumbnailContainer { height: 200px; }
.Thumbnail { width: auto; height: 100%; }

.btnContainerTrack { width: 50%; }
    .btnContainerTrack .btnTrack { cursor: pointer; width: 70px; height: 60px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
        .btnContainerTrack .btnTrack svg { height: 36px; width: auto; stroke-dasharray: 200; stroke-linecap: round; }
        .btnContainerTrack .btnTrack span { font-size: 12px; }
        .btnContainerTrack .btnTrack svg path { }
        .btnContainerTrack .btnTrack svg .cls-1 { fill: none; stroke: #666; stroke-width: 2px; }
        .btnContainerTrack .btnTrack svg .cls-3 { fill: #666; }

        .btnContainerTrack .btnTrack.active svg .cls-1 { animation: strok 1s; stroke: var(--PrimaryColor); transition: linear stroke 1s; animation-direction: reverse; }
        .btnContainerTrack .btnTrack.active svg .cls-3 { fill: var(--PrimaryColor); animation: rotat 1s; transform-origin: 30% 50%; transition: fill linear 1s; }
        .btnContainerTrack .btnTrack.active span { color: var(--PrimaryColor); transition: color linear 500ms; }

@keyframes strok {
    100% { stroke-dashoffset: 200; }
}

@keyframes rotat {
    100% { transform: rotate(360deg); }
}


/*-------------Dialog:BuyAuth--------------------*/


.authForm { min-width: 445px; min-height: 255px; position: relative; background-color: #fff; margin: auto; box-sizing: border-box; padding: 50px 20px 25px 20px; }

    .authForm .authType { display: flex; justify-content: space-around; }
        .authForm .authType .auth_item { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 150px; height: 100px; padding: 10px 20px; box-sizing: border-box; cursor: pointer; border: 1px solid #ccc; text-align: center; margin: 20px auto; }
            .authForm .authType .auth_item .price:before { content: "￥" }
            .authForm .authType .auth_item .title { display: block; font-size: 16px; text-align: center; width: 100%; padding: 0px 0px 10px 0px; border-bottom: 2px dashed #ccc; color: #ccc; }
            .authForm .authType .auth_item .price { font-size: 26px; flex: 1; display: flex; justify-content: center; align-items: center; color: #ccc; }
            .authForm .authType .auth_item[slctd=true] { background-color: black; color: white; }
                .authForm .authType .auth_item[slctd=true] .title {  color: white;border-color:white; }
                .authForm .authType .auth_item[slctd=true] .price {  color: white; }

    .authForm .btnClose { position: absolute; right: 0; top: 0; width: 90px; height: 50px; line-height: 50px; text-align: center; font-size: 14px; background-color: #ba7833; border: 0; color: #fff;cursor:pointer; }

    .authForm .btnBuy { color: white; background-color: var(--PrimaryColor); box-sizing: border-box; border-radius: 4px; width: 100px; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; margin-top: 20px; cursor: pointer; }