/*reset*/
body,h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,div,span,a{font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,"WenQuanYi Micro Hei",Verdana,sans-serif,"\5B8B\4F53";-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
a,area{outline:none;blr:expression(this.onFocus=this.blur())}
/*nowrap*/
.nowrap{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden;}
/*placeholder light color*/
.light-placeholder input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #BBBBBB !important; }
.light-placeholder input::-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #BBBBBB !important; }
.light-placeholder input:-moz-placeholder { /* Mozilla Firefox 19+ */ color: #BBBBBB !important; }
.light-placeholder input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #BBBBBB !important; }
/*iconfont icon*/
.icon {
    width: 1.5rem; height: 1.5rem;
    vertical-align: -0.4rem;
    fill: currentColor;
    overflow: hidden;
}
.icon.icon-small {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2rem;
}
.icon.icon-logo{
    width: 2rem;
    height: 2rem;
    vertical-align: -0.6rem;
}
.icon.icon-shadow{
    width: 4rem;
    height: 4rem;
    padding: 1rem 1rem;
    box-shadow: 0 2px 4px rgba(33,37,41,.1),0 7px 14px rgba(33,37,41,.1);
    border-radius: 2rem 2rem;
}

.feature .row{
    height:30rem;
}
.feature .row .icon-image{
    width: 18rem;
    height: 18rem;
}

.search-bar{
    width: 18rem !important;
    border-radius: 1.3rem !important;
}

.soundcard{}
/* use :after for height = width */
.soundcard .top{
    width:100%;
    background: #ccc;
    overflow: hidden;
    position: relative;
}
.soundcard .top:after{
    content: "";
    display: block;
    padding-bottom: 40%;
}
.soundcard .top.full:after{
    padding-bottom: 100%;
}
.soundcard .top .cover{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position:center center;
    background-image: linear-gradient(130deg , #7A88FF, #7AFFAF);
}
.soundcard .top .cover .player{
    position: absolute;
    width: 100%;
    height: 100%;
}
.soundcard .top .cover .expand{
    position: absolute;
    right:0;
    z-index:10;
    padding:1rem;
}
.soundcard .top .cover .author{
    position: absolute;
    bottom: 0;
}
.soundcard .adbox{
    width: 100%;
    min-height: 1px;
    opacity:0.75;
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    -o-transition: .2s ease-out;
    -ms-transition: .2s ease-out;
    transition: .2s ease-out;
}
.soundcard .adbox:hover{
    opacity:1;
}