body{
    font-family:"Microsoft Yahei","微软雅黑" !important;
}
#main{
    background: #1c1c1c;
}
.bgm{
    position: relative;
}
.bgm img{
    display: block;
    width: 100%;
}
.bgm .info{
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.bgm .info .btn{
    display: inline-block;
    width: 1.4rem;
    height: .36rem;
    background:linear-gradient(180deg,rgba(255,94,94,1) 0%,rgba(241,0,0,1) 100%);
    border-radius: 20px;
    border: none;
}
.bgm .info .btn .text{
    color: #FFF;
    font-size: 0.16rem;
    vertical-align: middle;
}
.bgm .info .btn .icon{
    display: inline-block;
    width: 0.08rem;
    height: 0.13rem;
    margin-left: 0.04rem;
    vertical-align: middle;

    background: url("http://qnoss1.lanlanlife.com/734cbe8eedb6f49199206f601f52dd60_26x16.png") no-repeat center;
    background-size: 100% auto;
}

.hb{
    padding: 0 0.05rem;
    height: 0.52rem;
    margin-bottom: 0.25rem;
}
.hb img{
    width: 100%;
}
.hb2{
    padding: 0 0.04rem 0 0.12rem;
    height: 0.86rem;
}
.hb2 img{
    width: 100%;
}

.tab{
    width: 100%;
    height: 0.45rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.16rem;
    font-weight: 400;
    line-height: 0.38rem;
}
.tab span{
    position: relative;
    display: inline-block;
    width: 50%;
    text-align: center;
}
.tab span.action{
    color: rgba(255,255,255,1);
    font-weight: bold;
}
.tab span.action:before{
    content: '';
    position: absolute;
    display: inline-block;
    width: 0.3rem;
    height: 0.02rem;
    background: #FFF;
    border-radius: 15px;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.items{
    margin-top: 0.13rem;
    overflow: hidden;
}
.item{
    float: left;
    width: 1.8rem;
    margin-left: 0.05rem;
    margin-bottom: 0.1rem;

    overflow: hidden;
}
.item .img{
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
    height: 1.8rem;

    margin: 0 0.04rem 0 0.04rem;
}
.item .img img{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.item .title{
    color: #000;
    font-size: 0.14rem;
    font-weight: bold;
    background: #FFF;
    padding: 0.07rem 0.04rem 0 0.04rem;
    margin: 0 0.04rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    height: .14rem;
    line-height: .16rem;
}

.item .info{
    overflow: hidden;
    padding: 0.07rem 0.04rem 0.1rem 0.04rem;
    margin: 0 0.04rem;
    background: #FFF;
}
.item .info .price{
    display: inline-block;
}
.item .info .price .icon{
    display: inline-block;
    width: 0.2rem;
    height: 0.1rem;
    background: url("http://qnoss.lanlanlife.com/864c421acb51d1937d004545fc55298e_20x40.png") no-repeat center;
    background-size: 100%;
    vertical-align: middle;
}
.item .info .price .num{
    display: inline-block;
    color: #FF003D;
    font-size: 0.16rem;
    font-weight: bold;
    height: .22rem;
    line-height: .22rem;
    margin-left: 0.06rem;
    vertical-align: middle;
}
.item .info .goto{
    float: right;
    display: inline-block;
    width: .6rem;
    height: .22rem;

    border-radius:10px;
    font-weight: bold;

    font-size: .14rem;
    color:rgba(255,255,255,1);
    line-height: .22rem;
    text-align: center;
}
.item .info .goto.bgm1{
    background:linear-gradient(90deg,rgba(255,103,61,1) 0%,rgba(255,0,81,1) 100%);
}
.item .info .goto.bgm2{
    background:linear-gradient(90deg,rgba(239,15,153,1) 0%,rgba(135,3,219,1) 100%);
}
.item .info .goto.bgm3{
    background: #B1B1B1;
}
.item .text{
    font-size: 0.12rem;
    color: #FFF;
    text-align: center;
    height: 0.25rem;

    font-weight: 400;
    padding-top: 0.1rem;
    padding-bottom: 0.06rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
}
.item .text.bgm1{
    background: url("http://qnoss3.lanlanlife.com/3437803ee1382071fa1ac8e9be05d023_165x540.png") no-repeat center;
    background-size: 100% 100%;
    background-color: #FFF;
}
.item .text.bgm2{
    background: url("http://qnoss.lanlanlife.com/ade26a9cfaabe94b8732b45ab80b78f9_110x360.png") no-repeat center;
    background-size: 100% 100%;
    background-color: #FFF;
}

.fixed{
    z-index: 5000;
    position: fixed;
    bottom: 0.53rem;
    right: 0.16rem;
    width: 0.57rem;
}
.fixed img{
    width: 100%;
}

.modal{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
}
.modal .context{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 3.44rem;
    background: #FFF;
}
.modal .context .img{
    width: 3.1rem;
    padding-top: 0.24rem;
    margin: 0 auto;
}
.modal .context .text{
    text-align: center;
    color: #000;
    margin-top: 0.05rem;
    height: 0.4rem;
    line-height: 0.4rem;
    background: #F4F9F3
}
.modal .context .img img{
    display: block;
    margin: 0 auto;
    width: 60%;
}
.modal .context .head{
    height: 0.46rem;
    text-align: center;
    background:linear-gradient(100deg,rgba(255,129,84,1) 0%,rgba(252,62,88,1) 100%);
}
.modal .context .head .title{
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height: 0.46rem;
}
.modal .context .head .icon{
    position: absolute;
    right: 0.01rem;
    font-size: 0.4rem;
    color: #FFF;
    margin-right: 0.19rem;
}
.taobao{
    display: block;
    margin: 0 auto;
}

.tips{
    margin: 0.2rem 0.09rem 0 0.09rem;
    border-radius:8px;
}
.tips img{
    width: 100%;
    height: 100%;
}
.modal-tips{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
}
.modal-tips .context{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 3.47rem;
    background: #FFF;
    border-radius: 9px;
}
.modal-tips .context .title{
    font-weight: bold;
    padding-top: 0.2rem;
    font-size: .18rem;
    color:rgba(255,67,89,1);
    text-align: center;
}
.modal-tips .context .text{
    font-weight: 400;
    color: #060606;
    margin-top: 0.15rem;
    font-size: 0.14rem;
    padding: 0 0.23rem;
    line-height: 1.6;
}
.modal-tips.tips2 .context .text{
    text-align: center;
}
.modal-tips .context .modal-tips-btn{
    text-align: center;
    margin: 0.2rem 0;
}
.modal-tips .context .modal-tips-btn .btn1-ok{
    font-size: 0.17rem;
    text-align: center;
    font-weight: bold;
    color: #FFF;
    display: inline-block;
    width: 1.76rem;
    height: 0.51rem;
    line-height: 0.51rem;
    background: url("http://qnoss3.lanlanlife.com/685f6b6810eb682843dc96af3fd5aacf_102x352.png") no-repeat center;
    background-size: 1.76rem 0.51rem;
}
.modal-tips .context .modal-tips-btn.btn2 .btn{
    width: 1.17rem;
    height: 0.38rem;
    line-height: 0.38rem;
    border-radius: 0.38rem;
    font-size: 0.17rem;
    text-align: center;
    font-weight: bold;
    color: #FFF;
    display: inline-block;
    overflow: hidden;

}
.modal-tips .context .modal-tips-btn .btn2-ok{
    background: #FC4843;
}

.modal-tips .context .modal-tips-btn .btn2-cancel{
    background: #B1B1B1;
    margin-right: 0.1rem;
}
.mg{
    padding: 0.1rem 0.12rem 0 0.12rem;
    overflow: hidden;
}
.mg a{
    float: left;
    width: 1.7rem;
    height: .67rem;
    margin-bottom: 0.1rem;
}
.mg a:nth-child(even){
    margin-left: 0.1rem;
}
.mg a img{
    width: 100%;
    height: 100%;
    display: block;
}