.mixerPage{position:relative;height:100%}.mixerPage .pageLeft{position:absolute;left:0;right:300px;top:0;height:100%}.mixerPage .pageLeft .pageLeftT{position:absolute;top:38px;width:100%;height:45%;background-color:#f5f5f5;border-radius:20px}.mixerPage .pageLeft .pageLeftB{position:absolute;width:100%;height:calc(55% - 30px);bottom:-20px}.mixerPage .pageRight{position:absolute;width:300px;bottom:-20px;top:-20px;right:-20px}.mixerPage .pageRight .pageRightT{right:0;left:0;top:0;bottom:242px;padding:10px;padding-bottom:0}.mixerPage .pageRight .pageRightM,.mixerPage .pageRight .pageRightT{position:absolute;background-color:#f5f5f5;border-radius:20px 0 0 20px}.mixerPage .pageRight .pageRightM{width:100%;bottom:62px;height:170px}.mixerPage .pageRight .pageRightB{position:absolute;height:52px;right:0;left:0;bottom:10px;padding:10px;padding-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box}.mixerPage .areaContent{height:calc(100% - 50px);margin-top:5px;overflow:hidden;padding:5px}.mixerPage .areaContent:hover{overflow:auto}.mixerPage .areaContent .areaOut{height:110px}.mixerPage .areaContent .areaItem,.mixerPage .areaContent .areaOut{padding:5px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box}.mixerPage .areaContent .areaItem{height:100%;width:100%;-webkit-box-shadow:0 0 9px 1px hsla(0,0%,56.1%,.2);box-shadow:0 0 9px 1px hsla(0,0%,56.1%,.2);border-radius:10px;cursor:pointer;position:relative;z-index:1;overflow:hidden;background-color:#fff}.mixerPage .areaContent .areaItem .areaName{position:absolute;bottom:15px;left:5px;height:20px;right:5px;text-overflow:ellipsis;word-break:keep-all;overflow:hidden;padding-left:10px}.mixerPage .areaContent .areaItem .areaImg{width:30px;margin-left:10px;margin-top:20px;display:block}.mixerPage .areaContent .areaItem .areaSelect{position:absolute;top:0;right:0;font-size:16px;color:#20afbf;text-align:center}.mixerPage .areaContent .areaItem .mask{position:absolute;height:100%;width:100%;background:linear-gradient(-25deg,#f8b551,#ffc467);top:100%;left:0;z-index:-1}.mixerPage .areaContent .areaItem .selectAll{top:0}.mixerPage .areaContent .areaItem .selectSome{top:50%}.mixerPage .volumeForm{width:100%;height:100%;background-color:#f5f5f5;border-radius:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mixerPage .volumeForm .volumeFormItem{text-align:center;position:relative;width:100%}.mixerPage .volumeForm .volumeFormItem .volumeFormItemT{border-bottom:1px solid #ddd;padding:10px}.mixerPage .volumeForm .volumeFormItem .volumeFormItemT .volumeFormItemLine{height:8px;width:50px;margin:10px auto 5px;background-color:#d8d8d8;border-radius:6px;cursor:pointer}.mixerPage .volumeForm .volumeFormItem .volumeFormItemT .selected{background-color:#28c840}.mixerPage .volumeForm .volumeFormItem .volumeFormItemB{position:absolute;width:100%;height:calc(100% - 76px);top:66px}.mixerPage .volumeForm .volumeFormItem .volumeFormItemB .widthSlider{top:30px;bottom:10px;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mixerPage .volumeForm .volumeFormItem .volumeFormItemB .widthSlider .el-slider__runway{width:4px;background-color:#bac5c7}.mixerPage .volumeForm .volumeFormItem .volumeFormItemB .widthSlider .el-slider__bar{width:4px;background-color:#007aff}.mixerPage .volumeForm .volumeFormItem .volumeFormItemB .widthSlider .el-slider__button-wrapper{left:-16px}.mixerPage .volumeForm .volumeFormItem .volumeFormItemB .widthSlider .el-slider__button{background-color:#007aff;border:2px solid #fff}.mixerPage .playForm{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.mixerPage .playForm .playFormItem{width:50px;cursor:pointer;border-radius:50%}.mixerPage .playForm .playFormItem:active{background-color:rgba(74,70,70,.61)}.mixerPage .playForm .playFormItem img{width:100%;float:left}.mixerPage .customSlider .el-slider__runway{height:4px}.mixerPage .customSlider .el-slider__bar{background-color:#636363}.mixerPage .customSlider .el-slider__button{width:10px;height:10px;border:2px solid #636363;background-color:#636363}.mixerPage .customSlider .el-slider__button-wrapper{top:-16px}.mixerPage .channelListTable th>.cell{padding-left:14px}.mixerPage .song{color:#45515e;overflow:hidden;width:98%;white-space:nowrap;text-overflow:ellipsis;display:inline-block;word-break:keep-all;padding-right:10px}.mixerPage .song:hover{text-decoration:underline;cursor:pointer}.mixerPage .deletedSong{color:red;text-decoration:line-through}.mixerPage .deletedSong:hover{cursor:inherit}.mixerPage .musicItem{display:-webkit-box;display:-ms-flexbox;display:flex;height:38px;line-height:38px;margin-bottom:5px;border-bottom:1px solid #d9e5e8;position:relative;overflow:hidden}.mixerPage .musicItem.active{background-color:#d9e9eb}.mixerPage .musicItem.active .deleteicon,.mixerPage .musicItem:hover .deleteicon{-webkit-transform:translateX(0);transform:translateX(0)}.mixerPage .musicItem .deleteicon{width:37px;position:absolute;right:0;top:0;line-height:37px;text-align:center;background-color:#fff;-webkit-transform:translateX(100%);transform:translateX(100%);-webkit-transition:.2s;transition:.2s}.mixerPage .musicItem .deleteicon .el-button--text{color:#f56c6c}.mixerPage .checkboxBig{width:30px;height:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mixerPage .checkboxBig .el-checkbox__inner{margin:0}@media screen and (max-width:1200px){.mixerPage .areaContent .areaOut{width:33.33%}}@media screen and (min-width:1200px) and (max-width:1400px){.mixerPage .areaContent .areaOut{width:25%}}@media screen and (min-width:1400px) and (max-width:1650px){.mixerPage .areaContent .areaOut{width:20%}}@media screen and (min-width:1650px){.mixerPage .areaContent .areaOut{width:16.6667%}}