@import '~antd/dist/antd.css';


@font-face {font-family: "iconfont";
  src: url('./assets/iconfont.eot?t=1524288064827'); /* IE9*/
  src: url('./assets/iconfont.eot?t=1524288064827#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('./assets/iconfont.ttf?t=1524288064827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('./assets/iconfont.svg?t=1524288064827#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-add:before { content: "\e623"; }

.icon-remove:before { content: "\e625"; }

.icon-search:before { content: "\e627"; }

.icon-play:before { content: "\e62e"; }

.icon-pause:before { content: "\e62f"; }

.icon-next:before { content: "\e631"; }

.icon-previous:before { content: "\e632"; }

.icon-repeat:before { content: "\e635"; }

.icon-volume:before { content: "\e636"; }

.icon-mute:before { content: "\e638"; }

.icon-fullscreen:before { content: "\e692"; }

.icon-list:before { content: "\e69b"; }

.icon-trash:before { content: "\e6e4"; }


ul,ol,li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
  min-height: 682px;
}

.flex {
  display: flex;
  flex-direction:column;
}

.App {
  width: 100%;
  height: 100%;
  min-width: 900px;
  text-align: center;
  position: relative;
  background-color: #888;
}

.App a{
  color: #fff;
}

.App button{
  color: #fff;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.bg-image-mask {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: .3;
  position:absolute;
  top: 0;
  left: 0;
}

.bg-image {
  width: 100%;
  height: 100%;
  background-image: url(./assets/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  transform: translateZ(0);
  opacity: .6;
  position:absolute;
  top: 0;
  left: 0;
}

.content {
  width: 90%;
  height: 100%;
  min-height: 630px;
  margin: 0 5%;
}

.blur {    
  -webkit-filter: blur(65px);
  -moz-filter: blur(65px);
  -ms-filter: blur(65px);    
  filter: blur(65px);    
}

.main {
  width: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.song-list-box {
  margin-left: 310px;
  margin-right: 310px;
  color: #fff;
  height: 100%;
  padding-top: 20px;
  box-sizing: border-box;
}

.full {
  margin-right: 0;
}