@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,700);

*, *:before, *:after {
    box-sizing: border-box;
}

@font-face {
    font-family: adobe;
    src: url("../font/SourceHanSerifCN-VF.ttf");

}

body {
    background-color: #fffdfd;
    color: #515044;
    font-family: "adobe", "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

#right-top {
    /*background-color: #AAD0EF;*/
    position: absolute;
    width: 50%;
    /*height: 50%;*/
    right: 0;
    top: 0;
    border-bottom: 28.8rem solid;
    border-left: 10rem solid transparent;
    height: 0;
    color: #AAD0EF;
}

#left-top {
    /*background-color: #ffffff;*/
    /*background-image: linear-gradient(5deg, rgba(220, 220, 220, 0.8), white);*/
    position: absolute;
    width: 50%;
    height: 50%;
    left: 0;
    top: 0;
}

#left-bottom {
    /*background-color: #F8E7A3;*/
    position: absolute;
    width: 50%;
    /*height: 50%;*/
    left: 0;
    bottom: 0;
    border-top: 28.8rem solid;
    border-right: 10rem solid transparent;
    height: 0;
    color: #F8E7A3;
}

#right-bottom {
    /*background-color: #F8E7A3;*/
    /*background-image: linear-gradient(to bottom left, rgba(220, 220, 220, 0.8), white);*/
    position: absolute;
    width: 50%;
    height: 50%;
    right: 0;
    bottom: 0;
}

.music-player-container {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    height: 740px;
    position: absolute;
    min-width: 920px;
    left: 43%;
    top: 50%;
    /*overflow: hidden;*/
}

.music-player-container:after {
    -webkit-filter: blur(8px);
    filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.8);
    bottom: -2px;
    content: " ";
    display: block;
    height: 10px;
    left: 19px;
    position: absolute;
    transform: rotate(-3deg);
    width: 70%;
    z-index: 10;
}

.music-player {
    background-color: #ffffff;
    box-shadow: -20rem 20rem 20rem rgba(0, 0, 0, .5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: -20rem 20rem 20rem 20rem rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2rem 2rem 4rem 2rem rgba(0, 0, 0, .3);
    height: 740px;
    padding: 40px 250px 40px 40px;
    position: absolute;
    text-align: right;
    width: 1180px;
    z-index: 15;
}

.player-content-container {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 30%;
    position: relative;
}

.artist-name {
    font-size: 56px;
    font-weight: normal;
    margin: 0 0 0.75em 0;
}

.album-title {
    font-weight: 200;
    font-size: 48px;
    margin: 0 0 1.75em 0;
}

.song-title {
    font-size: 36px;
    font-weight: 200;
    margin: 0 0 1.5em 0;
}

.album {
    /*box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65);*/
    height: 630px;
    margin-left: 550px;
    margin-top: 55px;
    position: relative;
    width: 630px;
    z-index: 10;
}

.album-art {
    background: #fff url("../img/cover.png") center/cover no-repeat;
    height: 630px;
    position: relative;
    width: 630px;
    z-index: 10;
}

.vinyl {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    transition: all 500ms;
    background-image: url("https://repo.bfw.wiki/bfwrepo/images/music/changpian/vinyl.png"), url("../img/cover.png");
    background-color: white;
    background-position: center, center;
    background-size: cover, 40% auto;
    background-repeat: no-repeat;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    height: 600px;
    left: 0;
    position: absolute;
    top: 15px;
    width: 600px;
    z-index: 5;
    will-change: transform, left;
}

.is-playing .vinyl {
    left: 52%;
}

.is-pausing .vinyl {
    left: 0;
}

.music-player-controls {
    text-align: center;
}

[class^=control-] {
    -webkit-filter: brightness(95%);
    filter: brightness(95%);
    border-radius: 100%;
    display: inline-block;
    height: 44px;
    margin: 0 3px;
    width: 44px;
}

[class^=control-]:hover {
    -webkit-filter: brightness(85%);
    filter: brightness(85%);
    cursor: pointer;
}

.control-play {
    background: transparent url("https://repo.bfw.wiki/bfwrepo/images/music/changpian/play.svg") center/cover no-repeat;
}

.is-playing .control-play {
    background: transparent url("https://repo.bfw.wiki/bfwrepo/images/music/changpian/pause.svg") center/cover no-repeat;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.lyric {
    width: 340px;
    height: 58%;
    /*margin:0 auto;*/
    top: 25%;
    overflow: hidden;
}

ul {
    transition-duration: 600ms;
}

ul, li {
    list-style: none;
    padding-top: 0.3rem;
    padding-right: 10px;
    margin-top: 1rem;
    color: rgba(0, 0, 0, .0);
    font-size: 18px;
}

li.on {
    /*    !*background-color: rgba(91, 120, 206, .8);*!*/
    /*    background-color: #007aff;*/
    /*    !*border-radius: 25px;*!*/
    color: #ffffff;
    font-weight: bolder;
    letter-spacing: 2px;
    height: 2.5rem;
    font-size: 24px;
}

p {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 24px;
    line-height: 24px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    text-align: center;
    margin-top: 1px;
    margin-bottom: 1px;
}

.progress-bar {
    position: absolute;
    width: 50%;
    left: 10%;
    top: 79%;
    z-index: 55;
}

.music {
    /*margin-top: 55rem;*/
    /*padding: 30px;*/
    box-sizing: border-box;
    /*background:rgba(0, 0, 0, 0.5);*/
    display: flex;
}

.info {
    color: #fff;
    margin-left: 30px;
    flex: 1;
}

.controls {
    margin-top: 6.8rem;
    margin-left: -8.8rem;
    /*padding-bottom: 1.5rem;*/
    display: flex;
    align-items: center;
}

.controls img {
    width: 1.2rem;
    margin-left: 0.8rem;
    cursor: pointer;
}

#progressbar {
    /*margin-top: -1.6rem;*/
    background-color: white;
    color: white;
    height: 2rem;
    z-index: 45;
}

#top {
    position: absolute;
    width: 39.3%;
    /*height: 50%;*/
    right: 0;
    top: 0;
    border-bottom: 23.15rem solid;
    border-left: 8rem solid transparent;
    height: 0;
    color: #AAD0EF;
    z-index: 30;
}

#high {
    position: absolute;
    background: url("../assets/gaoyin1.svg") center/cover no-repeat;
    background-size: 88%;
    width: 39.3%;
    height: 50%;
    left: 69.3%;
    /*top: 0;*/
    bottom: 50.5%;
    z-index: 30;
}

#bottom {
    position: absolute;
    width: 50.2%;
    /*height: 50%;*/
    right: 0;
    bottom: 0;
    border-bottom: 23.15rem solid;
    border-left: 8rem solid transparent;
    height: 0;
    color: #F8E7A3;
    z-index: 30;
}

#low {
    position: absolute;
    background: url("../assets/diyin1.svg") center/cover no-repeat;
    background-size: 85%;
    width: 39.3%;
    height: 55%;
    left: 66.8%;
    bottom: 6.2%;
    z-index: 30;
}

#circle {
    position: absolute;
    background-color: white;
    top: 14.9%;
    left: 43.6%;
    border-radius: 50%;
    height: 30rem;
    width: 30rem;
    z-index: 35;
}

#disk {
    position: absolute;
    width: 32rem;
    height: 40rem;
    background: url("../img/disk.png") center/cover no-repeat;
    background-size: 29rem, 29rem;
    bottom: 17.5%;
    right: 14.5%;
    z-index: 40;
}

#manner {
    position: absolute;
    width: 62%;
    /*background-color: white;*/
    /*box-shadow: -20rem 20rem 20rem rgba(0, 0, 0, .5);*/
    /*-moz-box-shadow: -20rem 20rem 20rem rgba(0, 0, 0, .5);*/
    -webkit-box-shadow: -2rem -2rem 4rem rgba(0, 0, 0, .3);
    border-top: 5rem solid;
    border-right: 1.5rem solid transparent;
    color: white;
    bottom: 0;
    z-index: 45;
}

#corner {
    position: absolute;
    width: 12%;
    /*background-color: white;*/
    /*box-shadow: -20rem 20rem 20rem rgba(0, 0, 0, .5);*/
    /*-moz-box-shadow: -20rem 20rem 20rem rgba(0, 0, 0, .5);*/
    /*-webkit-box-shadow: -2rem -2rem 4rem  rgba(0, 0, 0, .3);*/
    border-top: 5rem solid;
    border-right: 1.5rem solid transparent;
    color: #4D59F5;
    bottom: 0;
    z-index: 50;
}

#corner-right {
    position: absolute;
    width: 10%;
    /*background-color: white;*/
    /*box-shadow: -20rem 20rem 20rem rgba(0, 0, 0, .5);*/
    /*-moz-box-shadow: -20rem 20rem 20rem rgba(0, 0, 0, .5);*/
    /*-webkit-box-shadow: -2rem -2rem 4rem  rgba(0, 0, 0, .3);*/
    border-bottom: 5rem solid;
    border-left: 1.5rem solid transparent;
    color: #ffffff;
    bottom: 0;
    right: 0;
    z-index: 50;
}

#current-time {
    position: absolute;
    z-index: 65;
    left: 37%;
    top: 48%;
}

#waveform {
    margin-top: -2.2rem;
}

.scene video {
    position: absolute;
    height: 660px;
    /*width: 838px;*/
    z-index: 18;
}

.scene img {
    position: absolute;
    height: 740px;
    width: 838px;
    z-index: 18;
}

.mask {
    background-color: black;
    position: absolute;
    height: 740px;
    width: 838px;
    opacity: 0.2;
    z-index: 19;
}

.timestamp {
    font-family: JW, "Inter var", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

.bluemsg-last {
    position: relative;
    padding: 7px 20px;
    margin-top: 1.3rem;
    margin-bottom: 2px;
    color: #fff;
    background-color: rgba(0, 122, 255, 0.6);
    /*background-image: -webkit-linear-gradient(#5ac8fa, #007aff);*/
    /*background-image: -moz-linear-gradient(#5ac8fa, #007aff);*/
    /*background-image: -o-linear-gradient(#5ac8fa, #007aff);*/
    /*background-image: linear-gradient(#5ac8fa, #007aff);*/
    background-size: contain;
    background-attachment: fixed;
    border-radius: 21px;
    float: right;
    clear: both;
}

.bluemsg-last::before {
    content: "";
    position: absolute;
    z-index: -1;
    /*bottom: -2px;*/
    top: 30%;
    right: -11px;
    height: 15px;
    border-left: 12px solid rgba(0, 122, 255, 0.6);
    /*background-color:rgba(0,122,255,0.8);*/
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    /*background-size: contain;*/
    /*background-attachment: fixed;*/

    /*border-right: 20px solid transparent;*/
    /*background-color: #007aff;*/
    /*background-image: -webkit-linear-gradient(#5ac8fa, #007aff);*/
    /*background-image: -moz-linear-gradient(#5ac8fa, #007aff);*/
    /*background-image: -o-linear-gradient(#5ac8fa, #007aff);*/
    /*background-image: linear-gradient(#5ac8fa, #007aff);*/
    /*background-size: contain;*/
    /*background-attachment: fixed;*/
    /*border-bottom-left-radius: 16px 14px;*/
    /*-webkit-transform: translate(0, -2px);*/
}

.bluemsg-last::after {
    /*content: "";*/
    /*position: absolute;*/
    /*z-index: 1;*/
    /*bottom: -2px;*/
    /*right: -40px;*/
    /*width: 10px;*/
    /*height: 24px;*/
    /*background: #fff;*/
    /*border-bottom-left-radius: 10px;*/
    /*-webkit-transform: translate(-30px, -2px);*/
}

.greymsg-last {
    position: relative;
    padding: 7px 20px;
    margin-bottom: 2px;
    background: rgba(176, 176, 176, 0.6);
    background-size: contain;
    background-attachment: fixed;
    border-radius: 21px;
    /*color: #333;*/
    float: left;
    clear: both;
}

.greymsg-last::before {
    content: "";
    position: absolute;
    z-index: -1;
    /*bottom: -2px;*/
    top: 30%;
    left: -11.3px;
    height: 15px;

    border-right: 12px solid rgba(176, 176, 176, 0.6);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;

    /*border-left: 15px solid rgba(176,176,176,0.6);*/
    /*border-bottom-right-radius: 16px 14px;*/
    /*-webkit-transform: translate(7px, -3px);*/
}

.greymsg-last::after {
    /*content: "";*/
    /*position: absolute;*/
    /*z-index: 1;*/
    /*bottom: -2px;*/
    /*left: 23px;*/
    /*width: 7px;*/
    /*height: 24px;*/
    /*background: #fff;*/
    /*border-bottom-right-radius: 10px;*/
    /*-webkit-transform: translate(-30px,-2px);*/
}

.bubble {
    position: absolute;
    top: 47%;
    left: 10%;
    display: block;
    /*position: relative;*/
    width: 110px;
    height: 44px;
    float: left;
    clear: both;
}

[class^="bubble-"] {
    position: absolute;
    background: rgba(176, 176, 176, 0.7);
}

[class^="dot-"] {
    position: absolute;
    top: 12.5px;
    width: 11px;
    height: 11px;
    background: rgba(196, 196, 196, 0.6);
    border-radius: 20px;
}

.bubble-1 {
    left: 0px;
    width: 77px;
    height: 34px;
    border-radius: 22px;
    animation: bubble-1 1s linear 0s infinite alternate;
}

.bubble-2 {
    left: 0px;
    bottom: 7px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    animation: bubble-2 calc(2s / 3) linear 0s infinite alternate;
}

.bubble-3 {
    left: -5px;
    bottom: 2px;
    width: 8px;
    height: 8px;
    border-radius: 16px;
    animation: bubble-3 .4s linear 0s infinite alternate;
}

.dot-1 {
    left: 16px;
    animation: dot 1s linear 0s infinite alternate;
}

.dot-2 {
    left: 33px;
    animation: dot 1s linear calc(1s / 3) infinite alternate;
}

.dot-3 {
    left: 50px;
    animation: dot 1s linear calc(2s / 3) infinite alternate;
}

@keyframes bubble-1 {
    from {
        transform: scale(.95);
    }
    to {
        transform: scale(1);
    }
}

@keyframes bubble-2 {
    from {
        transform: scale(.8);
    }
    to {
        transform: scale(1);
    }
}

@keyframes bubble-3 {
    from {
        transform: scale(.8);
    }
    to {
        transform: scale(1);
    }
}

@keyframes dot {
    0% {
        background: #DADADE;
    }
    33.33% {
        background: #9FA0A4;
    }
    100% {
        background: #DADADE;
    }
}

@keyframes a {
    from {
        transform: translateY(222px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes b {
    from {
        transform: translateY(176px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes c {
    from {
        transform: translate(-80px, -110px) scale(.6);
        opacity: 0;
    }
    to {
        transform: translate(0px, -115px);
        opacity: 1;
    }
}

@keyframes d {
    from {
        transform: translateY(-115px);
        opacity: 1;
    }
    to {
        transform: translateY(-115px);
        opacity: 0;
    }
}

@keyframes e {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes f {
    from {
        transform: scale(.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes g {
    from {
        transform: translate(-80px, 10px) scale(.6);
        opacity: 0;
    }
    to {
        transform: translate(0) scale(1);
        opacity: 1;
    }
}


@keyframes fold-in {
    0% {
        transform: translateX(100%) scale(0);
        /*transform: ;*/
    }
    100% {
        transform: translateX(0) scale(100%);
        /*transform: ;*/
    }
}

@keyframes fold-out {
    0% {
        transform: translateX(0) scale(100%);
        /*transform: ;*/
    }
    100% {
        transform: translateX(100%) scale(0);
        /*transform: ;*/
    }
}

@keyframes lfold-in {
    0% {
        transform: translateX(-100%) scale(0);
        /*transform: ;*/
    }
    100% {
        transform: translateX(0%) scale(100%);
        /*transform: ;*/
    }
}

@keyframes lfold-out {
    0% {
        transform: translateX(0) scale(100%);
        /*transform: ;*/
    }
    100% {
        transform: translateX(-100%) scale(0);
        /*transform: ;*/
    }
}