/* display */
.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;} /* if the element is block level(eg. div, li), using 'inline_any' instead */
.none {display: none !important;}

.fixed {
    position: fixed;
    top:0;
}
.z-999 {z-index: 999 !important;}

.z-max {z-index: 99999 !important;}


.line-through{
    text-decoration:line-through;
}


.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*IE*/
    filter:FlipH;
}



/* width */
.w100p {width: 100% !important;}
.w95p {width: 95%;}
.w90p {width: 90%;}
.w80p {width: 80%;}
.w75p {width: 75%;}
.w70p {width: 70%;}
.w60p {width: 60%;}
.w50p {width: 50%;}
.w40p {width: 40%;}
.w30p {width: 30%;}
.w32p {width: 32% !important;}
.w33p {width: 33.3% !important;}
.w25p {width: 25%;}
.w20p {width: 20%;}
.w5r {width: .5rem;}
.w8r {width: .8rem;}
.w10r {width: 1rem;}
.w15r {width: 1.5rem !important;}
.w20r {width: 2rem;}
.w25r {width: 2.5rem;}
.w28r {width: 2.8rem;}
.w35r {width: 3.5rem;}
.w30r {width: 3rem;}
.w40r {width: 4rem;}
.w45r {width: 4.5rem;}
.w50r {width: 5rem;}


.mah-6r {
    max-height: 6rem;
}


.mah-100p {
    max-height: 100%;
}


.maw-100p {
    max-width: 100%;
}

.miw-100p {
    min-width: 100%;
}

.mih-100p {
    min-height: 100%;
}

/* height */
.h2-5{height: .25rem;}
.h3{height: .3rem;}
.h4{height: .4rem;}
.h5{height: .5rem;}
.h6r{height: .6rem;}
.h65r{height: .65rem;}
.h7r{height: .7rem;}
.h8r{height: .8rem;}
.h9{height: .9rem !important;}
.h10r{height: 1rem;}
.h12r{height: 1.2rem;}
.h13r{height: 1.3rem;}
.h15r{height: 1.5rem;}
.h18r{height: 1.8rem;}
.h20r{height: 2rem !important;}
.h25r{height: 2.5rem !important;}
.h30r{height: 3rem;}
.h35r{height: 3.5rem;}
.h40r{height: 4rem;}
.h45r{height: 4.5rem;}
.h50r{height: 5rem;}
.h70p{height: 70%;}
.h80p{height: 80%;}
.h100p{height: 100%;}
.mih-100p{min-height: 100%;} 

.mih-120p {
    min-height: 120%;
}

.lh3r {line-height: .3rem;
}

.lh35r {line-height: .35rem;
}


.lh4r {line-height: .4rem;
}

.lh5r {line-height: .5rem;
}

.min-scroll-height {
    min-height: 150%;
}
.h40{height: 0.8rem;}

/*padding*/
.pd-5{padding:.05rem;}
.pd1{padding:.1rem;}
.pd2{padding:.2rem !important;}
.pdlr{padding:0 .1rem;}
.pdlr2{padding:0 .2rem;}
.pd1-2{padding:.1rem .2rem;}
.pdt3r{padding-top:.3rem;}
.pdt1r{padding-top:.1rem;}
.pdt10r{padding-top:1rem;}
.pdt15r{padding-top:1.5rem;}
.pdt2r{padding-top:.2rem;}
.pdl2{padding-left:.2rem;}
.pdl3{padding-left: .3rem !important;}
.pdr1r{padding-right: .1rem !important;}
.pdr2r{padding-right: .2rem !important;}
.pdr3{padding-right: .3rem !important;}
.pdb0{padding-bottom:0 !important;}
.pdb2{padding-bottom:.2rem;}
.pdb1r{padding-bottom:.1rem;}
.pdb10r{padding-bottom:1rem;}
.pdb5r{padding-bottom:.5rem !important;}
.pdb8{padding-bottom:.8rem !important;}

/* margin */
.mg0-5r{margin:.05rem;}
.mg1r{margin:.1rem;}
.mg2r{margin:.2rem;}
.mg3r{margin:.3rem;}
.mt-5r{margin-top:-.5rem;}
.mt0-5r{margin-top:.05rem;}
.mt1r{margin-top:.1rem;}
.mt1-5r{margin-top:.15rem;}
.mt2r{margin-top:.2rem;}
.mt3r{margin-top:.3rem;}
.mt4r{margin-top:.4rem;}
.mt5r{margin-top:.5rem;}
.mt9r{margin-top: .9rem;}
.mt10r{margin-top: 1rem;}
.mt12r{margin-top: 1.2rem;}
.mt15r{margin-top: 1.5rem;}
.mt20r{margin-top: 2rem !important;}

.ml-25r{margin-left:-.25rem;}
.ml-2r{margin-left:-.2rem;}
.ml-1r{margin-left:-.1rem;}
.ml1r{margin-left:.1rem;}
.ml2r{margin-left:.2rem;}
.ml2-5r{margin-left:.25rem;}
.ml3r{margin-left:.3rem;}
.ml3-5r{margin-left:.35rem;}
.ml4-5r{margin-left:.45rem;}
.ml5r{margin-left:.5rem;}

.mr1r{margin-right:.1rem;}
.mr2r{margin-right:.2rem;}
.mb1r{margin-bottom:.1rem;}
.mb2r{margin-bottom:.2rem;}
.mb5r{margin-bottom:.5rem;}
.mb10r{margin-bottom:1rem;}
.mb20r{margin-bottom:2rem;}
.mb30r{margin-bottom:3rem;}
.mb50r{margin-bottom:5rem;}

.br05 {border-radius: .05rem;}
.br1 {border-radius: .1rem;}

.wbreak-word {word-wrap:break-word;}


.of-hidden{overflow: hidden;}




/*color*/
.weixin-green {color: #57f685;}
.weibo-red {color: #E8574E;}
.qq-blue {color: #00f;}
.bgc-red {background-color: #F00 !important}
.bgc-white {background-color: #FFF !important}
.bgc-soft-blue {background-color: rgb(233, 242, 244) !important}
.bgc-mask {background-color: rgba(0,0,0,.3);}


.c-orange {color: #f85032 !important;}

.bgc-f5 {background-color: #f5f5f5 !important}

.c-green {color: #0d6e61 !important}
.bgc-green {background-color: #0d6e61 !important}

.bgc-primary {background-color: #ec6d74;}
.c-primary {color: #ec6d74;}
.c3 {
    color: #333 !important;
    max-height: 40px;
    overflow: hidden;
}
.c6 {color: #666 !important;}
.c8 {color: #888;}
.c9 {color: #999;}
.ca {color: #aaa;}
.cc {color: #ccc;}

.c-white {color: #fff !important;}


/*badge*/
.mi-badge {
    padding: .04rem .16rem;
    border-radius: .05rem;
}


.max-badge {
    display: inline-block;
    padding: .05rem .16rem;
    border-radius: .05rem;
    text-align: center;
    width: 100%;
}

.badge-ati {
    color: #fff !important;
    background-color: #ed6c74 !important;
}


.min-badge {
    position: absolute;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    right: .25rem;
    top: -.05rem;
    color: #FFF !important;
    font-size: .2rem;
    border-radius: 50%;
    line-height: .28rem;
    width: .28rem;
    height: .28rem;
    background-color: #bd9d67;
    text-align: center;
}


/*圆边框标签*/
.badge-c {
    margin:0 .1rem .1rem .1rem;
    font-size: .2rem;
    padding:.05rem .2rem;
    border-radius: .4rem;
    white-space:nowrap;
}

.badge-primary {
    border:1px solid #ed6c74;
    background-color: #fff;
    color: #ed6c74;
}


/*关注实底*/
.squ-label {
    background-color: #f96565;
    font-size: .2rem;
    padding: .1rem .2rem;
    border-radius: .05rem;
    color: #fff;
}


/*渐变鲜绿*/
.fresh-green {
      background: #56ab2f;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to right, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to right, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safa*/
      color: #fff;
} 

/*渐变红*/
.fresh-red {
        background: #f00000; /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #f00000, #dc281e); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #f00000, #dc281e); 
        color: #fff;
} 





.fresh-red {
        background: #f00000; /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #f00000, #dc281e); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #f00000, #dc281e); 
        color: #fff;
} 


.deep-green {
    background-color: #04be02;
    color: #fff;
}


.fresh-orange {
    background-color: #ff8b64;
    color: #fff;
}

.blue-gray {
    background-color: #36d1dc;
    color: #fff;
}


.fresh-red {
    background-color: #f2994a;
    color: #fff;
}

.deep-red {
    background-color: #f00;
    color: #fff;
}


.fresh-purple {
    background-color: #ba4af2;
    color: #fff;
}



/*标签边框*/
.badge-red {
    color: #f00;
    border:1px solid #f00;
}


.badge-disabled {
    color: #ddd;
    border:1px solid #ddd;
}



.deep-green-c {
    color: #04be02;
}


.star-active {
    color: #ffdb00 !important;
}



/*三角形图标 上下*/
.triangle-up {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: .1rem solid transparent;
    border-right: .1rem solid transparent;
    border-bottom: .1rem solid #795548;
    vertical-align: middle;
}

.triangle-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: .1rem solid transparent;
    border-right: .1rem solid transparent;
    border-top: .1rem solid #795548;
    vertical-align: middle;
}


/*右指向箭头*/
.right-arrow {
    float: right;
    transform: rotate(-45deg);
    width: .2rem;
    height: .2rem;
    border-top: .05rem solid transparent;
    border-right: .05rem solid #666;
    border-bottom: .05rem solid #666;
    border-left: .05rem solid transparent;
}
    


/*text 列表*/
.mi-cell-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding-left: .24rem;
    overflow: hidden;
    height: .8rem;
    border:1px solid #f5f5f5;
    font-family: "PingFangSC-Medium";
}

.mi-cell-child {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding-left: .24rem;
    overflow: hidden;
    height: .8rem;
    padding: .2rem;
    border:1px solid #eee;
    background-color: #f1f1f1;
    font-family: "PingFangSC-Medium";
}


.mi-cell-left, .mi-cell-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: .26rem;
}


.mi-cell-right{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    min-height: .8rem;
    color: #525252;
    text-align: right;
    font-size: .26rem;
    padding-right: .24rem;
    -ms-flex-align: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}





/*评论区*/
.mi-cell {
    background-color: #fff;
    padding:.2rem;
    border-bottom: 1px solid #eee;
}

/*页面主要内容区块*/
.mi-info-div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
/*    transform: translate3d(0,0,0); */
    max-width: 764px;
    margin: 0 auto;
}

.full-box {
position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


@media (min-width: 768px) {
   .compa-max {
            position: relative;
            width: 768px !important;
            height: 100%;
            margin-left: 50%;
            left: -384px; 
            background-color: #f1f1f1;
        }

    body {
        background-color: #eee !important;
    }

    .m-navbar,.mi-navbar{
        position: fixed !important;
        width: 768px !important;
        height: 100%;
        margin-left: 50%;
        left: -384px !important;
        background-color: #f1f1f1;
    }



   .m-tabbar,.mi-sum,.mi-dialog {
     width: 768px !important;
     margin-left: 50%;
     left: -384px !important;
   }   


   .fixed,.bottom-box,.mi-issue-btn {
        width: 768px !important;
    }

   .return-top {
        left:50% !important;
        margin-left: 314px;
   }

    .buy-box{
        width: 768px !important;
    }



}


.noscroll,
.noscroll body {
    overflow: hidden;
}





/*滑动模块用*/
.mi-div {
    overflow: hidden;
    width: 100%;
    z-index: 2;
} 

.mi-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 30px;
    margin-top: -40px;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    background-color: #fff;
}


.mi-box {
    padding-top: .3rem;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    background-color: #fff;
    color: #333;
}

.mi-box-d {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    height: 7rem;
    flex-wrap: wrap;
}



/*评论相关*/
.comment-div {
    height: 1rem;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    bottom: .1rem;
    border-top: 1px solid #ddd;
}

.comment-input {
    padding:.1rem;
    border: none;
    font-size: .3rem;
    height: .8rem;
    background-color: #F5F5F5;
    width: 100%;
    border-radius: .05rem;
    line-height: .8rem;
}

.comment-icon {
    height: 1rem;
    width: 1rem;
    display: flex;
    align-items:center;
    justify-content: center;
    color: #999;
}

.comment-icon span {
    font-size: .4rem;
    font-weight: 700;
}

.comment-send {
    display: flex;
    height: 1rem;
    width: 2.2rem;
    align-items: center;
    justify-content: center;
}


.comment-send span{
    display: inline-block;
    padding:.2rem .3rem;
    border-radius: .05rem;
    background-color: #ec6d74;
    color:#fff;
}

.comment-mask {
    position: absolute;
    width: 100%;
    height: 1.1rem;
    bottom: 0;
    overflow: hidden;
    transform: translateZ(0);
    z-index: 9999;
    background-color: #fff;
} 


.comment-masks {
    position: fixed;
    width: 100%;
    height: 1.1rem;
    bottom: 0;
    overflow: hidden;
    transform: translateZ(0);
    z-index: 9999;
    background-color: #fff;
} 


.comment-mask-ani {
    position: fixed !important;
    animation: comment-mask-ani 0.2s forwards;
    -webkit-animation: comment-mask-ani 0.2s forwards;
    transform: translateZ(0);
}
@-webkit-keyframes comment-mask-ani { 0% { height: 1.2rem; } 100% { height: 4.3rem;} }





/*评论列表相关*/
.mi-comment-block {
    background-color: #fff;
    padding-top: .2rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid #eee;
}

 .node-title {
    border-bottom: 1px dashed #eee;
    margin-bottom: .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaa;
    font-weight: 700;
} 

.node-goods-title {
    border-bottom: 1px solid #eee;
    margin-bottom: .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaa;
    font-weight: 700;
    padding: .2rem;
}

.node-goods-title span{
    display: inline-block;
    height: .3rem;
    line-height: .3rem;
    color: #888;
    font-size: .26rem;
    font-weight: 700;
    border-left: .05rem solid #f00;
    padding-left: .1rem;
    margin:.2rem 0;
}


.title-div {
    margin-top: .2rem;
    height: 1rem;
    padding: .1rem .2rem;
    background-color: #fff;
    border-bottom: 1px solid #eee !important;
}


.node-title span{
    display: inline-block;
    height: .3rem;
    line-height: .3rem;
    color: #888;
    font-size: .26rem;
    font-weight: 700;
    border-left: .05rem solid #f00;
    padding-left: .1rem;
    margin:.2rem 0;
}

.reply-myself {
    background-color: #f1f1f1;
    height: .8rem;
    width: 100%;
    margin-right: .2rem;
    border-radius: .05rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: .3rem;
    color: #999;
    margin-bottom: .4rem;
    font-size: .28rem;
}


.comment-parent span {
    padding-left: .1rem;
    padding-right: .2rem;
    color: #aaa;
}

.comment-parent p {
    margin-left: .9rem;
}

.comment-child-list {
    margin-top: .2rem;
    margin-left: .9rem;
    background-color: #eee;
    padding: .05rem .2rem;
    border-radius: .05rem;
}

.comment-child span{
    line-height: .6rem;
}

.comment-parent i {
    margin-left: .1rem;
}




.comment-item {
    border-bottom: 1px solid #f1f1f1;
    padding-top:.2rem;
    padding-bottom:.2rem;
}

.comment-item:first-child{
    padding-top:0;
}

.comment-item:last-child{
    border-bottom: none;
}

.reply-num {
    color: #795548;
    font-weight: bold;
}

.all-comment {

    text-align: center;
    line-height:.8rem;
    margin-bottom: -.2rem;
    font-weight: bold;
}


/*表情模块*/
 .moji-div {
    width: 1rem;
    display: flex;
    flex-direction: column; 
    height: 3.4rem;
    flex-wrap: wrap;
    align-items: flex-start;
 }

 .moji-item {
    margin-top: .1rem;
    margin-left: .1rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
 }



/*点赞*/
.upvote {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url(../img/web_heart_animation.png) 0 0 no-repeat;
    background-size: 2900%; 
    animation: upvote-ani steps(28) 0.8s forwards;
    -webkit-animation: upvote-ani steps(28) 0.8s forwards;
}

@keyframes upvote-ani { 0% { background-position: 0%; } 100% { background-position: 100%; } }
@-webkit-keyframes upvote-ani { 0% { background-position: 0%; } 100% { background-position: 100%; } }




/*札记动态标签*/

    .tag-style1 {
        transform: skew(45deg);
        top: .05rem;
        left: .2rem;
        border-bottom: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: 0px 1px 1px rgba(0,0,0,.2);
    }

    .tag-style1 div {
        position: relative;
        transform: skew(-45deg);
        top: -.05rem;
        left: .15rem;
    }

    .tag-style2 {

        border-top: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: -1px -1px 1px rgba(0,0,0,.2);
        transform: skew(-45deg);
        top: -.25rem;
        left: .2rem;
    }

    .tag-style2 div {
        position: relative;
        transform: skew(45deg);
        top: -.35rem;
        left: -.2rem;
    }

    .tag-style3 {

        border-bottom: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: -1px 1px 1px rgba(0,0,0,.2);
        transform: rotate(180deg) skew(45deg);
        transform-origin: 0% 0%;
        top: .05rem;
        left: .05rem;
    }

    .tag-style3 div {
        position: relative;
        transform: rotate(180deg) skew(-45deg);
        left: -.25rem;
        top: .35rem;
    }

    .tag-style4 {
        border-top: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: -1px -1px 1px rgba(0,0,0,.2);
        transform-origin: 0% 0%;
        transform: rotate(180deg) skew(-45deg);
        top: .35rem;
        left: -.25rem;
    }

    .tag-style4 div {
        position: relative;
        transform: rotate(180deg) skew(45deg);
        top: .05rem;
        left: .15rem;
    }



    .tag-style5 {
        border-top: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: -1px -1px 1px rgba(0,0,0,.2);
        top: -.35rem;
        left: .05rem;
        line-height: .3rem;
    }

    .tag-style5 div {
        position: relative;
        top: -.32rem;
        left: .05rem;
    }



    .tag-style6 {
        border-bottom: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: -1px 1px 1px rgba(0,0,0,.2);
        top: .1rem;
        left: .05rem;
        line-height: .3rem;
    }

    .tag-style6 div {
        position: relative;
        top: .03rem;
        left: .05rem;
    }


    .tag-style7 {
        border-bottom: 1px double #fff;
        box-shadow: 0px 1px 0px rgba(0,0,0,.2);
        top: -.25rem;
        left: .05rem;
        height: 1px;
        margin-top: 5px;
    }

    .tag-style7 div {
        position: relative;
        top: -0.1rem;
        left: .05rem;
    }


    .tag-style8 {
        border-top: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: -1px -1px 1px rgba(0,0,0,.2);
        transform-origin: 0% 0%;
        transform: rotate(180deg);
        top: .45rem;
        left: .06rem;
        line-height: .3rem;
    }

    .tag-style8 div {
        position: relative;
        transform: rotate(180deg);
        top: 0;
        left: .05rem;
    }



    .tag-style9 {
        border-bottom: 1px double #fff;
        border-left: 1px double #fff;
        box-shadow: -1px 1px 1px rgba(0,0,0,.2);
        transform-origin: 0% 0%;
        transform: rotate(180deg);
        top: -.02rem;
        left: .06rem;
        line-height: .3rem;
    }

    .tag-style9 div {
        position: relative;
        transform: rotate(180deg);
        top: .3rem;
        left: .05rem;
    }


    .tag-styleA {
        border-bottom: 1px double #fff;
        box-shadow: 0px 1px 0px rgba(0,0,0,.2);
        transform: rotate(180deg);
        transform-origin: 0% 0%;
        top: .32rem;
        left: .05rem;
        margin-top: -3px;
        height: 1px;
    }

    .tag-styleA div {
        position: relative;
        transform: rotate(180deg);
        top: .2rem;
        left: .05rem;
    }



.title-icon {
    height: .42rem;
}

/*flex布局*/
.flex{
    display: flex;
}

.flex1{
    flex: 1 1 0;
}


.flex2{
    flex: 2 1 0;
}

.flex-base {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-end;
}

.flex-right {
    justify-content: flex-end !important;
}


.flex-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex-center {
    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;
}

.flex-around {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-around;
}

.flex-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
}

.layout-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

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


.flex-column-c{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.flex-end {
    align-items: flex-end;
}


.flex-shrink{flex-shrink: 0;}


.min-text-indent {
    text-indent:.2rem;
}

.text-indent {
    text-indent:.5rem;
}


/*文章*/
.mi-article {
    background-color: #fff;
    padding:.3rem .3rem 0;
}


.mi-article img{
    display: inline-block !important;
}


.mi-article-head {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: .2rem;
    margin-bottom: .2rem;
}

.mi-article p {
    font-size: .25rem;
    color: #666;
    text-indent:.5rem;
    margin:.2rem auto;
}


.mi-article-time {
    color: #B3B3B3;
}

.mi-article-control {
    display: flex;
    align-items: center;
    font-size: .26rem;
}

/*点赞*/
.upvote-div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1rem;
    margin-left: -.2rem;
    font-size: .26rem;
    background-color:#fff;
}

.upvote-num {
    margin-left: -.3rem;
    margin-right: .2rem;
}

.mi-article-footer {
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.mi-article-add {
    margin:0 .1rem;
}


.top0 {top: 0;}
.top2 {top: 0.2rem;}
.top9-2 {top: 0.92rem;}
.top9 {top: 0.9rem;}
.top10 {top: 1rem;}
.top15 {top: 1.5rem;}
.top16 {top: 1.6rem;}
.top17 {top: 1.7rem;}
.top18 {top: 1.8rem;}
.top20 {top: 2rem;}
.top25 {top: 2.5rem;}
.top30 {top: 3rem;}
.top35 {top: 3.5rem;}
.top53 {top: 5.3rem;}
.top54 {top: 5.4rem;}
.top55 {top: 5.5rem;}
.left2{left: 0.2rem;}
.bottom0 { bottom: 0;}
.bottom1 { bottom: 0.1rem;}
.bottom9 { bottom: 0.9rem;}
.bottom10 { bottom: 1rem;}
.bottom18 { bottom: 1.8rem;}
.bottom30 { bottom: 3rem;}


.border-top {
    border-top:1px solid #eee;
}

.border-bottom {
    border-bottom:1px solid #eee;
}


/*通用按钮，主要为表单提交等*/
.primary-btn {
    background-color: #ed6c74;
    width: 90%;
    height: .7rem;
    margin-left: 5%;
    border-radius: .05rem;
    text-align: center;
    line-height: .7rem;
    color: #fff;
    font-size: .3rem;
    border:none;
}

/*通用按钮，主要为表单提交等*/
.buy-submit {
    background-color: #ed6c74;
    width: 30%;
    height: .7rem;
    margin-left: 5%;
    border-radius: .15rem;
    text-align: center;
    line-height: .7rem;
    color: #fff;
    font-size: .3rem;
    border:none;
    margin-right: 3%;
}
.count{color: #333;}
.buy_num{ font-size: 10px;}
.bold{font-weight: 600;}
.primary-red {
    color: #f87979 !important;
}

.primary-color {
    color: #efb245 !important;
}


/*新旧价格*/
.old-price {
    color: #f0212c;
}

.new-price {
    color: #f0212c;
    font-size: .3rem;
    font-family: "PingFangSC-Medium";
}



/*font-size*/
.f18r {font-size: .18rem;}
.f2r {font-size: .2rem;}
.f22r {font-size: .22rem;}
.f24r {font-size: .24rem;}
.f26r {font-size: .26rem;}
.f3r {font-size: .3rem;}
.f35r {font-size: .35rem;}
.f4r {font-size: .4rem;}
.f5r {font-size: .5rem;}
.f6r {font-size: .6rem;}
/*font-weight*/
.fw2 {font-weight: 200;}
.fw6 {font-weight: 600;}
.fw7 {font-weight: 700;}


.f-medium {font-family: "PingFangSC-Medium";}



/*底部选项相关*/
.m-tabbar {
    position: fixed;
    bottom: 0;
    background-color: #fff;
}

.m-tabbar img {
    width: .5rem;
}

.tabbar-item {
    color: #999899;
}

.tabbar-active {
    color: #ec6d74;
}


/*不换行*/
.nowrap {
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}



/*------------------------分享------------------------*/
.share-mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
    background-color: rgba(0,0,0,0.8);
    z-index: 9999;
}
.callIn {
     -webkit-transform:scale(0);
    transform: scale(0);
    transition: .25s transform;
    -webkit-transition: .25s transform;
}

.calldown {
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);     /* IE 9 */
    -moz-transform:rotate(90deg);    /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg);  /* Opera */
    transition: .25s transform;
    -webkit-transition: .25s transform;
}

.callleft {
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0);
    transition: .25s transform;
    -webkit-transition: .25s transform;
}
/*收缩和展开*/

.collapse {
    transition:max-height 0.8s;
    max-height:0px;
    overflow: hidden;
}

.callup {
    max-height:1000px;
}

.rotatel-arrow:after {
    margin-left: .05rem;
    margin-right: -.08rem;
    display: block;
    font-family: YDUI-INLAY;
    font-size: .2rem;
    color: #c9c9c9;
    content: "\E608";
    transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
}    

.rotatel:after {
    -webkit-transform:rotate(90deg) translateZ(0);
    transform: rotate(90deg) translateZ(0);
    transition: .25s transform;
}


.share-box  {
    position: absolute;
    bottom: 6rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    height: 1rem;
    left: 10%;
    -webkit-flex-wrap:wrap;
    flex-wrap: wrap;
}

.share-item {
    height: 2rem;
    width: 25%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    justify-content: center;
    align-items: center;
}

.share-box  span{
    color: #fff;
}

.share-item span:first-child {
    margin: .4rem .2rem .1rem;
    font-size: .7rem;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
}


.share-item i {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    line-height: 1rem;
    border-radius: 50%;
}




.share-item-btn {
    margin: .4rem .2rem .1rem;
    border: none;
    font-size: .7rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
}







.cencel-share {
    position: absolute;
    bottom: 1rem;
    width: 100%;
    height: 1.5rem;
    text-align: center;
}




.cencel-share  i{
    color: #fff;
    font-size: .6rem;
}

.text-left { text-align: left;}
.text-center {text-align: center;}
.text-right { text-align: right;}


.bottom-box {
    position: fixed;
    bottom: 0;
    height: 1rem;
    width: 100%;
}

/*空数据*/
.empty {
    width: 100%;
    height: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.empty i{
    font-size: 1.3rem;
    color: #ffb4b8;
}

.empty div {
    margin-top: .2rem;
    font-size: .3rem;
    color: #aaa;
    font-weight: 700;
}

/* 行内两行式 */
.fans-comment span {
    display: block;
    font-size: .26rem;
    margin-left: .2rem;
    margin-top: .05rem;
    font-weight: 700;
}

/*微信分享指示*/

.tip-share-div {
    position: fixed;
    right: .1rem;
    top: .3rem;
    background-color: rgba(0,0,0,0.8);
    z-index: 999;
    border-radius: .1rem;
    opacity: 0;
    color: #fff;
    font-size: .26rem;
    font-weight: 700;
    padding:.3rem .6rem .3rem .3rem;
}


.share-svg {
    position: absolute;
    right: 0;
    top: -.3rem;
}

.tip-share-ani {
    animation: tip-share-ani 2.5s forwards;
    -webkit-animation: tip-share-ani 2.5s forwards;
}


@-webkit-keyframes tip-share-ani
{
    0%   {opacity: 0;}
    25%  {opacity: 1;}
    80%  {opacity: 1;}
    100% {opacity: 0;}
} 

@keyframes tip-share-ani
{
    0%   {opacity: 0;}
    25%  {opacity: 1;}
    80%  {opacity: 1;}
    100% {opacity: 0;}
} 


/*轮播图左右箭头*/
.slider-left {
    position: absolute;
    top: 50%;
    left: .5rem;
    border-left: .15rem solid #eee;
    border-bottom: .15rem solid #eee;
    height: .6rem;
    width: .6rem;
    box-shadow: -3px 3px 2px 1px rgba(0,0,0,.5);
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);     /* IE 9 */
    -moz-transform:rotate(45deg);    /* Firefox */
    -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
    -o-transform:rotate(45deg);
}

.slider-right {
    position: absolute;
    top: 50%;
    right: .5rem;
    border-left: .15rem solid #eee;
    border-top: .15rem solid #eee;
    height: .6rem;
    width: .6rem;
    transform:rotate(135deg);
    -ms-transform:rotate(135deg);     /* IE 9 */
    -moz-transform:rotate(135deg);    /* Firefox */
    -webkit-transform:rotate(135deg); /* Safari 和 Chrome */
    -o-transform:rotate(135deg);
}




/*富文本*/

.goods-intro-article {
    padding:.1rem .2rem;
}


.goods-intro-article img {
    width: 100% !important;
}



/*头像*/

.head-img {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    /* border:3px solid #ddd; */
}

.head-img-2 {
    width:1rem;
    height:1rem;
    border-radius: 50%;
}
.shop-img {
    width: .8rem;
    height: .8rem;
    border-radius: 20%;
    border: 1px solid #ddd;
}


.max-head-img {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.min-head-img {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
}


/*瀑布流*/
.container-fluid {
    box-sizing: border-box;
    width: 100%;
    padding-left: 1%;
    margin-bottom: 1rem;
}

.mi-fall {
    float: left;
    margin-right: .1rem;
    margin-bottom: .1rem;
    width: 48.5%;
    overflow: hidden;
    position: relative;
}

.fall-left {
    margin-right: .12rem;
}

.mi-node-item {
    width: 100%;
    background-color: #fff;
    border-radius: .1rem .1rem .05rem .05rem;
    margin-bottom: .1rem;
    border:1px solid #ddd;
}

.mi-pic-box {
    position: relative;
}

.mi-pic-box img {
    border-radius: .05rem .05rem 0 0;
    width: 100%;
}

.head-name {
    font-size: .22rem;
    color: #888;
    display: inline-block;
    width: 2.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: "PingFangSC-Medium";
}
.shop-info{
    width: 85%;
    float: right;
}
.shop-name {
    font-size: .26rem;
    color: #888;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: "PingFangSC-Medium";
}
.shop-sell {
    font-size: .22rem;
    color: #888;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: "PingFangSC-Medium";
}

.mi-node-overview {
    margin: .1rem;
    word-wrap: break-word;
}

.mi-node-title {
    font-family: "PingFangSC-Medium";
    font-size: .24rem;
    color: #000;
}

.mi-node-sketch {
    margin: .1rem 0 .3rem;
    color: #666;
    font-size: .22rem;
    font-family: "PingFangSC-Medium";
}

.mi-node-like {
    position: absolute;
    right: 0;
    bottom: .07rem;
}


.bottom-05 {bottom: .05rem;}


/*列表头部类型*/
.mi-active {
    border-bottom: .05rem solid #f00;
    color: #ec6d74;
}

.mi-item {
    background-color: #fff;
    text-align: center;
    line-height: .6rem;
    flex-shrink: 0;
    font-size: .26rem;
}

.mi-item-f {
    display: inline-block;
    padding: 0 .1rem;
}

.mi-item-mg {
    margin:0 .2rem;
}


/*个人中心或其他用户详情背景*/
.mi-header-div {
    background: #ec6d74;
}


.mi-item .icon-error {
    position: absolute;
    font-size: .4rem;
    color: #f00;
    top: 0;
    right:0;
}



/*app入口*/
.app-inter {
    position: absolute;
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 1rem;
    z-index: 999;
    background-color: rgba(0,0,0,.7);
    padding:.3rem;
    color: #fff;
}


.app-inter-detail {
    display: flex;
}


.app-inter-detail .mi-icon-logo {
    font-size: .5rem;
    color: #aaa;
}


.app-btn {
    border:1px solid #fff;
    font-size: .26rem;
    padding: .06rem .2rem;
    border-radius: .05rem;
    color: #fff;
}


.mi-slider-behend {
    z-index: 99;
        overflow: hidden;
    width: 100%;
}


.mi-slider-num {
    color: #FFF;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .2rem;
    font-size: .26rem;
    text-shadow: 0 2px 5px #000;
}



.m-navbar,.mi-navbar {
    position: fixed !important;
    width: 100%;
    top: 0;
}









.slider-pagination>.slider-pagination-item {
    margin: .05rem;
    width: 5px;
    height: 5px;
    border-radius: 10px;
    display: inline-block;
    background-color:rgba(236,109,116,.5);
}

.slider-pagination>.slider-pagination-item.slider-pagination-item-active {
    width: 15px;
    background-color:#ec6d74;
}







/*模糊*/

.blur { 
            filter: blur(10px);
}

.scroll-mark {
    position:absolute;
    top:200%;
}


/*规格属性标签*/

    .mi-good-size {
        font-size: .28rem;
        line-height: .4rem;
        padding: .1rem;
        border-top:1px solid #f5f5f5;

    }


.mi-specifica {
    border: 1px solid #ccc;
    font-size: .24rem;
    color: #ccc;
    padding-left:.2rem;
    padding-right:.2rem;
    height: .4rem;
    line-height: .4rem;
    border-radius: .05rem;
    margin-right: .2rem;
}

.specifica-seleced {
    border: 1px solid #ff847b;
    color: #ff847b;
}

.specifica-disabled {
    background-color: #ccc;
    color: #fff;
}


    .mi-specifica-box {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: .1rem;
    }

    .mi-num-detail {
        font-size: .2rem;
        color: #888;
    }

    .mi-remain-num {
        margin-left: .1rem;
        margin-bottom: .2rem;
        color: #888;
        font-size: .2rem;
    }

    .mi-good-nunber {
        font-size: .28rem;
        padding:.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    .model-box{
        background-color: #fff;
        margin: .1rem 0;
        padding-bottom: .2rem;
    }


    /*模块标题*/
    .model-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #aaa;
        font-weight: 700;
        padding: 0 .2rem;
        background-color: #fff;
    }

    .model-title span{
        display: inline-block;
        height: .4rem;
        line-height: .4rem;
        color: #888;
        font-size: .26rem;
        font-weight: 700;
        border-left: .05rem solid #ec6d74;
        padding-left: .1rem;
        margin: .2rem 0;
    }


.item-box {
    margin: .05rem;
    padding: .1rem;
    border:1px solid #f1f1f1;
    border-radius: .05rem;
}


.item-title {
    margin:0 .1rem;
    text-align: left;
    font-size: .24rem;
    color: #666;
    line-height: .6rem;
}

/*横向列表（多用于商品）*/
.list-item {
    display: flex;
    padding: .1rem;
    background-color: #fff;
}

.item-pic {
    width: 2rem;
    height: 2rem;
    border-radius: .05rem;
    border:1px solid #f1f1f1;
}


.item-desc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .1rem;
}






/*商品详情*/
.good-item-div {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: .3rem;
}

.good-item-box {
    width: 50%;
    padding: .1rem;
}

.good-item-box:nth-child(2n+1) {
    padding-left: .15rem;
}

.good-item-box:nth-child(2n) {
    padding-right: .15rem;
}

.good-item {
    border:1px solid #eee;
    overflow: hidden;
    border-radius: .06rem;
    background-color: #fff;
}

.good-title {
    font-size: .22rem;
    color: #666;
    font-family: "PingFangSC-Medium";
}

.good-item .good-pic {
    width: 100%;
    height: 3.5rem;
    background-color: #fff;
}

.good-item .note-title {
    font-size: .26rem;
    font-weight: 500;
    margin-left: .1rem;
    height: 0.8rem;
}

.good-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .05rem;
}

.good-price {
    display: flex;
    align-items: flex-end;
}

.good-price div {
    margin:0 .1rem;
}

.more-btn {
    display: inline-block;
    padding: .05rem .2rem;
    border: 1px solid #666;
    border-radius: .05rem;
    color: #666;
    font-size: .26rem;

}


/*问答评论*/
.evaluate-item {
    margin-left: .2rem;
}

.evaluate-item p{
    margin: .1rem;
    margin-bottom: .3rem;
}


.evaluate-extand {
    position: absolute;
    height: .8rem;
    width: 100%;
    bottom: 0;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fafafa 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}


.add_more_test {
    height: .5rem;
    width: 100%;
    bottom: 0;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fafafa 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}


.down-ward {
    display: inline-block;
    height: .2rem;
    width: .2rem;
    margin-left: -.6rem;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
    transform:rotate(-45deg);
}


.up-ward {
    margin-left: -.6rem;
    border-left: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    transform:rotate(135deg);
}

.bottom-line {
    border-bottom: 1px solid #f1f1f1;
}



.evaluate-item-desc {
    padding-bottom: .05rem;
    margin-bottom: .3rem;
    overflow: hidden;
    max-height: 3rem;
}


.expand-active {
    max-height: 100% !important;
}

/*尾部占位*/
.perch-bottom {
    display: inline-block;
    width: 100%;
    height: 1rem;
    background-color: #f00;
    opacity: 0;
}

.textarea-num {
    position: absolute;
    bottom: .2rem;
    right: .2rem;
    color: #bbb;
}


.good-list {
    display: flex;
    flex-wrap: wrap;
}


.mi-good-item {
    background-color: #fff;
    width: 48%;
    margin-left: 1.3%;
    margin-bottom: .2rem;
    border:1px solid #eee;    
    border-radius: .05rem;
    overflow: hidden;
}

.mi-good-pic img {
    width: 100%;
    height: 3rem;
}

.icon-pic {
    width: .4rem;
    height: .4rem;
}

.asc-order {
    width: 0;
    height: 0;
    border-right: .07rem solid transparent;
    border-bottom: .07rem solid #aaa;
    border-left: .07rem solid transparent;
    margin-bottom: .05rem;
}

.desc-order {
    width: 0;
    height: 0;
    border-right: .07rem solid transparent;
    border-bottom: .07rem solid #aaa;
    border-left: .07rem solid transparent;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.mi-return {
    display: inline-block;
    height: .22rem;
    width: .22rem;
    border-right: 1px solid #fff;
    border-top: 1px solid #fff;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}


.nav-search input {
    border:none;
    background-color: none;
    height: .7rem;
    line-height: .7rem;
    width: 85%;
    font-size: .3rem;
}

/*富文本中图片最大不能超过100%;*/
.rich-text img {
    max-width: 100% !important;
    overflow: hidden;
}



.hidden-100p {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.header-div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


    .mailer-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .user-list div {
        width: 25%;
        font-size: .24rem;
        border-right: 1px solid #fff;
        text-align: center;
        vertical-align: middle;
        color: #fff;
    }

    .user-list div:last-child {
        border-right: none;
    }


/*图标按钮外层*/
    .icon-outer {
    display: inline-block;
    background-color: rgba(0,0,0,.6);
    height: .6rem;
    width: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;
}


/*地址*/
.addr-box {
        padding: .2rem .1rem .2rem .3rem;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
    }


/*三角型上下箭头*/
    .up-price{
    width: 0;
    height: 0;
    border-right: .07rem solid transparent;
    border-bottom: .07rem solid #aaa;
    border-left: .07rem solid transparent;
    margin-bottom: .05rem;
}

.down-price{
    width: 0;
    height: 0;
    border-right: .07rem solid transparent;
    border-bottom: .07rem solid #aaa;
    border-left: .07rem solid transparent;
    transform:rotate(180deg);
}





/*mi-dialog组件*/
.mi-dialog {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,.3);
    transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
    z-index: 99999;
}


.dialog-body {
    background-color: #fff;
    border-radius: .1rem;
    box-shadow: 0 .08rem .2rem rgba(0, 0, 0, 0.5);
    /* overflow: hidden; */
}


.dialog-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: .8rem;
    font-size: .3rem;
    border-bottom: 1px solid #f5f5f5;
    font-weight: 600;
}

.dialog-title-between {
    justify-content: space-between;    
}


.dialog-select {
    position: absolute;
    background-color: #fff;
    top: .9rem;
    width: 98%;
    margin:1%;
    z-index: 2;
    padding: .2rem;
    border:1px solid #ddd;
    border-radius:.05rem;
    font-size: .3rem;
    box-shadow: 0 0 10px 1px #ddd;
}


.dialog-check {
    display: flex;
    align-items: center;
    padding: .2rem;
    border-bottom: 1px solid #f1f1f1;
}

.dialog-check:last-child {
    border-bottom: none;
}

.dialog-select span{
    display: block;
    line-height: .7rem;
    border-bottom: 1px solid #f5f5f5;
}

.dialog-select span:last-child {
     border-bottom: none;
}

.dialog-btn {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: .9rem;
    background-color: #ec6d74;
    font-size: .3rem;
    color: #fff;
}


.dialog-desc {
    margin-bottom: .9rem;
    padding:.2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 7rem;
    font-family: "PingFangSC-Medium";
}




/**/
.bottom-btn {
    display: inline-block;
    padding:.2rem 1rem;
    border-radius: 1rem;
    background-color: #ec6d74;
    color: #fff;
    font-size: .35rem;
}



.mi-btn {
    display: inline-block;
    padding: .1rem;
    background-color: #ec6d74;
    border-radius: .05rem;
    color: #fff;
}

.line-title {
    font-size: .26rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: .1rem;
}

.line-title:before{
    content: "";
    width: 100%;
    height: 2px;
    border-bottom: 2px solid #666;
}

.line-title:after{
    content: "";
    width: 100%;
    height: 2px;
    border-bottom: 2px solid #666;
}


.his-item {
    height: .6rem;
    line-height: .6rem;
    width: 100%;
    text-align: center;
}

.his-item span{
    display: inline-block;
    width: 49%;
}

.his-item:nth-child(2n+1) {
    background-color: #e4e4e4;
}


/*slider轮播图*/

.slider-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}


.slider-item img {
    max-width: 100% !important;
    max-height: 6rem !important;
}









/*觅放映首页和详情*/

.video-goods {
    position: absolute;
    right: -2rem;
    top: .4rem;
    width: 2.1rem;
    border-radius: .05rem;
    overflow: hidden;
    box-shadow: 0 0 0 .05rem rgba(255, 255, 255, 0.5);
    background-color: #fff;
    text-align: center;
    z-index: 5;
    animation: fromLeft 1s forwards;
    transition-timing-function: ease-out;
}

.fromLeft {
    animation: fromLeft 2s forwards;
}


@-webkit-keyframes fromLeft {
    0% {
        right: -2rem;
        /*初始状态 透明度为0*/
    }
    100% {
        right: .4rem;
        /*结尾状态 透明度为1*/
    }
}

.fadeOut {
    animation: fadeOut .5s forwards;
    transition-timing-function: linear;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        right: .4rem;
        transform:scale(1);
        /*初始状态 透明度为0*/
    }
    100% {
        opacity: 0;
        right: .4rem;
        transform:scale(0);
        /*结尾状态 透明度为1*/
    }
}

.video-goods img {
    width: 2rem;
}

.video-goods-detail {
    font-size: .22rem;
    text-align: center;
    margin: .1rem;
    text-align: left;
    font-family: "PingFangSC-Medium";
}

.video-goods-btn {
    display: inline-block;
    padding: .05rem .3rem;
    background-color: #ec6d74;
    border-radius: .2rem;
    color: #fff;
    font-size: .22rem;
    margin-bottom: .1rem;
}

video {
    width: 100%;
    z-index: 0;
}

.video-box {
    position: relative;
    overflow: hidden;
}


.barrage-box {
    width: 100%;
    height: 1rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: .1rem;
}


.barrage-input {
    background-color: #e5e5e5;
    border:none;
    height: .6rem;
    width: 100%;
    line-height: .6rem;
    padding-left: .2rem;
    border-radius: .6rem;
    color: #999;
}


.progress-div {
    width: 100%;
    height: .6rem;
    line-height: .6rem;
    display: flex;
    align-items: center;
}


.progress-bar-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .6rem;
    background-size: 10px 10px;
    display: flex;
    align-items: center;
    transform: scale(1);
    background-color: (0,0,0,.5)
}

.dot
{ 
        border-radius: .2rem;
        content: "";
        display: inline-block;
        height: .22rem;
        width: .22rem;
        margin-top: -.09rem;
        background-color: #fff;
}

.progress-ani {
    animation: progress-ani 6s forwards;
    -webkit-animation: progress-ani 6s forwards;
}

@-webkit-keyframes progress-ani { 
        0% { opacity: 1; } 
        87% { opacity: 1; } 
        99% { opacity: 0;transform: scale(1);}
        100% { opacity: 0;transform: scale(0);}

 }

 .play-time {
    color: #fff;
    margin: auto .1rem;
}

.surplus-time {
    color: #fff;
    margin: auto .1rem;
}

.barrage-icon {
    width: 1rem;
    white-space: nowrap;
    display: flex;
}



.m-switch {
    display: inline-block;
    width: 30px;
    height: 15px;
}


.m-switch:checked {
    border-color: #ec6d74;
    background-color: #ec6d74;
}

.m-switch:after, .m-switch:before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .2rem;
    content: "弹";
    font-weight: 700;
    color:#888;
}


.switch:before {
    height: 15px;
}

.m-switch:before {
    width: 15px;
}

.m-switch:after,
.m-switch:before {
    height: 15px;
    top: -1px;
    left: -3px;
}

.m-switch:after {
    width: 15px;
}

.video-btn {
    width: 1rem;
    height: .5rem;
    display: flex;
    justify-content: center;
}

.video-btn i {
    font-size: .5rem;
}


.video-banner {
    position: absolute;
    width: 100%;
    top: 0;
}

.video-banner img{
    width: 100%;
}

.video-play-num {
    position: absolute;
    background-color: rgba(0,0,0,.5);
    bottom: 0;
    color: #fff;
    width: 100%;
    padding-left: .2rem;
    font-size: .26rem;
    font-weight: 700;
    height: .6rem;
    line-height: .6rem;
    z-index: 10;
}



.video-comint {
    border-top: 1px solid #ddd;
    position: absolute;
    bottom: 0;
    height: 1rem;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.element {
    width: 1rem;
    height: 1rem;
    background-color: #34538b;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    transform: translate(0px, 0px);
}

.video-goods-btn {
    display: inline-block;
    padding: .05rem .3rem;
    background-color: #ec6d74;
    border-radius: .2rem;
    color: #fff;
    font-size: .22rem;
    margin-bottom: .1rem;
}


.icon-error {
    position: absolute;
    top: .1rem;
    right: .1rem;
    font-size: .5rem;
    color: rgba(0, 0, 0, .5);
}


/*弹幕*/
.barrage {
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 15;
    white-space: nowrap;
    border-radius: .8rem;
    padding: .08rem;
    display: inline-block;
}

.barrage img {
    display: inline-block;
    vertical-align: middle;
}

.barrageContainer {
    position: absolute;
    -webkit-animation-name: barrage;
    animation-name: barrage;
    -weblit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    width: 100%;
    z-index: 2;
}

.text-barrage {
    font-size: .26rem;
    font-weight: 600;
    margin-left: .1rem;
    margin-right: .1rem;
    text-shadow:0 0 5px #000;
}

@keyframes barrage {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

.barrage-send {
    margin: auto .2rem;
    border-radius: .05rem;
    color: #ec6d74;
    font-weight: 500;
    font-size: .5rem;
}

/*觅放映小商品*/
.min-video-goods {
    width: 2.3rem;
    border-radius: .05rem;
    overflow: hidden;
    background-color: #fff;
    text-align: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: .3rem;
    margin: 0 .15rem .2rem 0;
}


.min-video-goods img {
    width: 2.1rem;
    height: 2.1rem;
    margin:.1rem;
}

.video-goods img {
    width: 2.1rem;
}

.min-video-goods div {
    font-size: .22rem;
    color: #666;
    text-align: left;
    padding: 0 .1rem .2rem;
    font-family: "PingFangSC-Medium";
}

.min-video-item:first-child {
    margin-left: .1rem;
}

.dolist {
    position: absolute;
    left:50%;
    top: 50%;
    margin-left: -.6rem;
    margin-top: -.6rem;
}


/*商品详情说明*/
.goods-intro-article {
    margin:0 .2rem;
    margin-top: 0;
    text-indent: .5rem;
    font-size: .24rem;
    line-height: .4rem;
    color: #666;
    font-family: "PingFangSC-Medium";
}


.list-tip {
    position: relative;
    background-color: #ec6d74;
    border-radius: .05rem;
    padding:.1rem .2rem;
    color: #fff;
    font-size: .22rem;
}


.list-tip:after {
    position: absolute;
    top: .16rem;
    right: -.05rem;
    content: "";
    padding:.1rem .1rem;
    background: #ec6d74;
    border-right: 0;
    border-bottom: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*札记详情页表头图标*/
.line-text-shadow:before {
    text-shadow: 0px 0px 3px #000;
}


.cart-tips{
    margin-left: .1rem;
    padding:.02rem .1rem;
    border:1px solid #ec6d74;
    border-radius: .05rem;
    color: #ec6d74;
}


/*活动加入记事本提醒*/
.act-remind {
    background-color: #0f0;
    border-radius: 50%;
    padding: .3rem;
}



.checkbox {
    width: .4rem;
    height: .4rem;
    border:1px solid #888;
    border-radius: .05rem;
    margin-right: .1rem;
} 


/*广告图底部蒙版说明*/
.banner-instruc {
        position: absolute;
        width: 100%;
        height: .6rem;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        bottom: 0;
    }





.img-border {
    border-radius: .1rem;
    border:1px solid #ddd;
}

/*更多*/
.mi-more {
    display: inline-block;
    height: .22rem;
    width: .22rem;
    border-left: 1px solid #888;
    border-bottom: 1px solid #888;
    transform:rotate(-135deg);
}




/*空数据跳转按钮*/
.empty-btn {
    display: inline-block;
    padding: .2rem .3rem;
    background-color:#ec6d74;
    color: #fff;
    font-size: .26rem;
    border-radius: .1rem;
}

/*贝塞尔曲线*/
.cubic-bezier{
    transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
}



/*提问页面*/


.lateral-able {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
    
}

.pb0 {
    padding-bottom: 0 !important;
}


.bgc-que {
    background-color: rgba(255, 138, 101, 1);
}

.bgc-ans {
    background-color: rgba(255, 183, 77, 1);
}


.que-input {
    height: .6rem;
    line-height: .6rem;
    background-color: rgba(229, 229, 229, 1);
    border:none;
    border-radius: .6rem;
    width: 100%;
    padding-left:.3rem;
    margin:0 .2rem;
}

.que-btn {
    display: inline-block;
    width: 1.8rem;
    height: .6rem;
    line-height: .6rem;
    border-radius: .6rem;
    background-color: rgba(236, 109, 116, 1);
    color: #fff;
    margin-right: .2rem;
}




/*问题详情*/

.tip-order{
    display: inline-block;
    padding: .02rem .06rem;
    color: #fff;
    font-size: .24rem;
    border-radius: .05rem;
    margin-right: .05rem;
}

.tip-head{
    display: inline-block;
    padding: .06rem .1rem;
    color: #fff;
    font-size: .24rem;
    border-radius: .05rem;
    margin: .1rem;
}

.lateral-able {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
}

.pb0 {
    padding-bottom: 0 !important;
}


.bgc-que {
    background-color: rgba(255, 138, 101, 1);
}

.bgc-ans {
    background-color: rgba(255, 183, 77, 1);
}


.que-input {
    height: .6rem;
    line-height: .6rem;
    background-color: rgba(229, 229, 229, 1);
    border:none;
    border-radius: .6rem;
    width: 100%;
    padding-left:.3rem;
    margin:0 .2rem;
}

.que-btn {
    display: inline-block;
    width: 1.8rem;
    height: .6rem;
    line-height: .6rem;
    border-radius: .6rem;
    background-color: rgba(236, 109, 116, 1);
    color: #fff;
    margin-right: .2rem;
}


.ans-good-pic {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .2rem;
}

.ans-good-detail {
    height: 1.2rem;
    font-size: .3rem;
}

.foucs-btn {
    display: inline-block;
    padding: .05rem .15rem;
    margin-right: .2rem;
    border-radius: .4rem;
    border:1px solid #aaa;
}

.foucs-act {
    color: rgba(236, 109, 116, 1) !important;
    border:1px solid rgba(236, 109, 116, 1) !important;
}




/*二期首页*/

.mi-group-time {
    font-size: .2rem;
    color: #ec6d74;
}


.mi-group-time em:nth-child(2n) {
    margin-left: -.06rem;
    margin-right:.05rem;
}


.mi-group-time em:nth-child(2n+1) {
    margin-left: .05rem;
}

.mi-group-time .embcg {
    border:1px solid #e5e5e5;
    padding:.05rem 0;
    margin-right: .1rem;
    display: inline-block;
}


.mi-goods-item {
    width: 2.3rem;
    overflow: hidden;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: .28rem;
    margin-right: .15rem;
    background-color: #fff;
    border-radius: .05rem;
    padding:.1rem;
}


.mi-friend-item {
    width: 3.2rem;
    overflow: hidden;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: .28rem;
    margin-right: .15rem;
    background-color: #fff;
    border-radius: .05rem;
    padding:.1rem;
}

.mi-friend-more {
    width: 100%;
    height: 3rem;
    border:1px solid #eee;
    color: #bbb;
}

.mi-friend-item img {
    width: 100%;
    height: 3rem;
}



.mi-goods-item-div:first-child {
    margin-left: .1rem;
} 



.mi-goods-item img {
    width: 100%;
    height: 2.1rem;
}

.mi-describe-tag {
    display: inline-block;
    padding: 0 .05rem;
    border:1px solid #ec6d74;
    border-radius: .05rem;
    font-size: .18rem;
    color: #ec6d74;
}

/* 表头搜索框等 */
.mi-navbar {
    display: flex;
    width: 100%;
    height: 1.2rem;
    background-color: rgb(252, 106, 123) !important;
    align-items: center;
    border-bottom: 1px solid #ddd;
    position: static !important;
    margin-left: 0;
    border-bottom: 1px solid #f5f5f5;
}




.nav-comment i {
    margin-right:.15rem;
    color: #999;
}


.nav-search {
    height: .7rem;
    width: 100%;
    border-radius: 1rem;
    margin: .2rem;
    display: flex;
    align-items: center;
    background-color: #fff;
    border:1px solid #eee;
}
.goods-nav-title-top {
    position: fixed;
    z-index: 90;
    top: 0;
    height: .7rem;
    width: 100%;
    display: flex;
    align-items: center;
    max-width: 764px;
    background-color: #fc6a7b !important;
}
.goods-nav-title {
    position: fixed;
    z-index: 999;
    top: 0;
    height: .7rem;
    width: 100%;
    display: flex;
    align-items: center;
    max-width: 764px;
    background-color: #fc6a7b !important;
}
.nav-search-title{
    font-size: 16px;
    line-height: 24px;
    width: 80%;
    text-align: center;
}

.nav-search i {
    font-size: .4rem;
    margin: 0 .1rem 0 .2rem;
    color: #bbb;
}



.seleced-items li {
    flex:1 1 0;
    text-align: center;
    font-size: .28rem;
}

.seleced-items span {
    display: inline-block;
    margin-top: .2rem;
    width: 100%;
    color: #666;
}


/*直播*/

.video-user-img {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right: -.4rem;
    transform: translateX(.5rem);
    animation: videoUser .5s forwards;
}

/*朋友圈头像*/
.friend-user-img {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    margin-right:.1rem;
    transform: translateX(.5rem);
    animation: videoUser .5s forwards;
}

@-webkit-keyframes videoUser {
    0% {
        transform: translateX(1rem);
    }
    100% {
        transform: translateX(0);
    }
}


.user-left {
    border-right: 1px solid #ddd;
    width: 1.8rem;
    overflow: hidden;
}

.videoConcent {
     animation: videoConcent 1s forwards;
}


@-webkit-keyframes videoConcent {
    0% {
        transform: translateY(1rem);
    }
    100% {
        transform: translateY(0);
    }
}


.live-box {
    position: relative;
    background-color: #fff;
    margin:0 .1rem;
}

.live-box:before {
    content: "";
    position: absolute;
    top:-.15rem;
    right: 50%;
    margin-right: -10px;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: .2rem solid transparent;
    border-right: .2rem solid transparent;
    border-bottom: .2rem solid #fff;
}


.barrage-send {
    margin: auto .2rem;
    border-radius: .05rem;
    color: #ec6d74;
    font-weight: 500;
    font-size: .5rem;
}

 .video-progress {
    width: 100%;
    border:none;
    height: .03rem;
    background-color: #fff;
    display: flex;
    overflow: inherit;
}


.bonus {
    position: absolute;
    bottom: .9rem;
    right: .3rem;
    width: .8rem;
}




.bonus-time {
    position: absolute;
    bottom: .5rem;
    right: .3rem;
    width: .8rem;
    text-align: center;
    border: 1px solid #20a89c;
    color: #20a89c;
    font-size: .18rem;
    background-color: #fff;
    border-radius:.4rem;
}


    




.bonus-ani{
    /* animation: bonus .3s infinite linear; */
    animation: bonus 4s infinite cubic-bezier(.25, .1, .3, 1.5);
}


@-webkit-keyframes bonus {
    0% {
        -webkit-transform:rotate(0);
    }

    20% {
        -webkit-transform:rotate(0);
    }

    30% {
        -webkit-transform:rotate(50deg);
    }

    40% {
        -webkit-transform:rotate(0);
    }
    100% {
        -webkit-transform:rotate(0);
    }
}

/* @-webkit-keyframes bonus {
    0% {
        -webkit-transform:rotate(0);
    }

    25% {
       -webkit-transform:rotate(50deg);
    }

    75% {
        -webkit-transform:rotate(-50deg);
    }
    100% {
        -webkit-transform:rotate(0);
    }
} */


.live-shop {
    position: relative;
    left: -1%;
    height: .7rem;
    width: 102%;
    background-color: #fff;
    margin-bottom:.1rem 0;
    box-shadow: 0px 3px 3px #ddd;
}


.live-shop-car {
    width: 1.5rem;
    height: .7rem;
    line-height: .7rem;
    background-color: #ec6d74;
    text-align: center;
    color: #fff;
}





/*飞来飞去酷炫图*/

.the-ani {
    position: relative;
    width: 7rem;
    height: 7rem;
    overflow: hidden;
}

.ani-1{
    position: absolute;
    top: 0;
    left: 0;
    width:3rem;
    height:3.3rem;
    border-radius: .06rem;
    -webkit-transform:translate3d(.5rem,.5rem,0);
    transform:translate3d(.5rem,.5rem,0);
    transition: 1s cubic-bezier(.25, .1, .3, 1.5) transform;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ani-2 {
    position: absolute;
    top: 0;
    left: 0;
    width:2rem;
    height: 2.3rem;
    border-radius: .03rem;
    -webkit-transform:translate3d(1rem,4.1rem,0);
    transform:translate3d(1rem,4.1rem,0);
    transition: 1s cubic-bezier(.25, .1, .3, 1.5) transform;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ani-3{
    position: absolute;
    top: 0;
    left: 0;
    width:3rem;
    height:3.3rem;
    border-radius: .06rem;
    -webkit-transform:translate3d(3.5rem,3.5rem,0);
    transform:translate3d(3.2rem,3.5rem,0);
    transition: 1s cubic-bezier(.25, .1, .3, 1.5) transform;
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ani-4 {
    position: absolute;
    top: 0;
    left: 0;
    width:2rem;
    height: 2.3rem;
    border-radius: .03rem;
    -webkit-transform:translate3d(3.8rem,1rem,0);
    transform:translate3d(3.8rem,1rem,0);
    transition: 1s cubic-bezier(.25, .1, .3, 1.5) transform;
        background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
} 


.lay-btn-single {
    display: inline-block;
    border-radius: .2rem;
    padding: .03rem .12rem;
    font-size: .2rem;
}

.lay-btn-double {
    display: inline-block;
    border-radius: .3rem;
    padding: .03rem .18rem;
    font-size: .26rem;
}


.ani-1-1{
    position: absolute;
    top: 0;
    left: 0;
    width:3rem;
    height:3rem;
    -webkit-transform:translate3d(0,2rem,0);
    transform:translate3d(0,2rem,0);
    transition: 1s cubic-bezier(.25, .1, .3, 1.5) transform;
}

.ani-2-1 {
    position: absolute;
    top: 0;
    left: 0;
    width:3rem;
    height:3rem;
    -webkit-transform:translate3d(3rem,2rem,0);
    transform:translate3d(3rem,2rem,0);
    transition:1s cubic-bezier(.25, .1, .3, 1.5) all;
}

.ani-3-1{
    position: absolute;
    top: 0;
    left: 0;
    width:3rem;
    height: 3rem;
    -webkit-transform:translate3d(6rem,2rem,0);
    transform:translate3d(6rem,2rem,0);
    transition: 1s cubic-bezier(.25, .1, .3, 1.5) transform;
}

.ani-4-1 {
    position: absolute;
    top: 0;
    left: 0;
    width:3rem;
    height: 3rem;
    -webkit-transform:translate3d(9rem,2rem,0);
    transform:translate3d(9rem,2rem,0);
    transition: 1s cubic-bezier(.25, .1, .3, 1.5) transform;
} 

.sup-ani3 {
    position: relative;
    width:3rem;
    height: 3rem;
    flex-shrink: 0;
    -webkit-transform:translate3d(0,0,0) rotate(0deg);
    transform: translate3d(0,0,0) rotate(0deg);
    transition: 1s all;
    -webkit-transition: 1s all;
}



.sup-ani {
    position: absolute;
    -webkit-transform:translate3d(-17rem,0,0) rotate(90deg);
    transform: translate3d(-17rem,0,0) rotate(90deg);
    transition: 1s all;
    -webkit-transition: 1s all;
}

.sup-ani2 {
    position: absolute;
    -webkit-transform:translate3d(17rem,0,0) rotate(90deg);
    transform: translate3d(17rem,0,0) rotate(90deg);
    transition: 1s all;
    -webkit-transition: 1s all;
}


.mi-div-ani {
    overflow: hidden;
    width: 100%;
    z-index: 2;
} 

.mi-nav-ani {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 47px;
    margin-top: -45px;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
}

.mi-box-ani {
    padding-top: .3rem;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    color: #333;
    height: 3rem;
}


/* .lay-pic {
    width: 100%;
    height: 100%;
    padding: .05rem;
} */

.lay-pic-1 {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    margin-top: 5%;
}

.lay-pic-2 {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    margin-top: 5%;
}


.cross-ani {
    -webkit-transform:scale(0) rotate(180deg);
    transform: scale(0) rotate(180deg);
    transition: .5s transform;
    -webkit-transition: .5s transform;
}

/*推荐达人*/
/* .recomment {
    background-color: #fff;
    height: 5rem;
    column-count:3;
    column-gap:.1rem;
}

.recom-item {
    height: 4.8rem;background-color: #0ff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}


.recom-half {
    height: 2.35rem;background-color: #f0f;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .1rem;
} */

.recomment {
    background-color: #fff;
    height: 3.2rem;
    display: flex;
    justify-content: center;
}

.recom-item {
    height: 3rem;background-color: #fff;
    overflow: hidden;
    margin: .05rem;
    flex: 1 1 0;
}


.recom-item img{
    min-height: 100%;
}


.recom-half {
    height: 1.5rem;background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: .1rem;
}

/* 品牌馆 */

 .mi-div-m {
    overflow: hidden;
    position: absolute;
    border-top: 1px solid #eee;
}

.mi-nav-m {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 30px;
    margin-left: -30px;
    height: 100%;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    background-color: #fff;
}



.mi-box-m {
    display: flex;
    flex-direction: column;
    background-color: #fff;
}


.mi-item-m {
    width: calc(100% - .5rem);
    background-color: #fff;
    flex-shrink: 0;
    font-size: .26rem;
    color: #666;
    font-size: 600;
    border-bottom: 1px solid #e5e5e5;
    padding: .2rem;
}

.mi-active-l {
    background-color: #F5F5F5;
    color: #ec6d74;
}


.good-cellect-div {
    position: absolute;
    right: 0;
    width: calc(100% - 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #eee;
}


.brand-desc {
    position: absolute;
    width: .5rem;
    top: .2rem;
    right: 0;
    bottom: .2rem;
    z-index: 99999;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.brand-desc span {
    display: inline-block;
    border-radius: 50%;
    width: .3rem;
    height: .3rem;
    line-height: .3rem;
    font-size: .18rem;
    color: #042552;
    text-align: center;
}


.brand-select {
    color: #fff !important; 
    background-color: #ec6d74; 
} 

.border-line {
    border: 1px solid #eee;
}

.brand-pic {
    width: 1rem;
    height: 1rem;
    border: 1px solid #eee;
}








.mi-div-l{
    overflow: hidden;
    position: absolute;
    border-top: 1px solid #eee;
}

.mi-nav-l {
   overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 30px;
    margin-left: -30px; 
    height: 100%;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
    background-color: #fff;
}



.mi-box-l {
    display: flex;
    flex-direction: column;
    background-color: #fff;
}


.mi-item-l {
    width: 2rem;
    background-color: #fff;
    text-align: center;
    line-height: 1rem;
    flex-shrink: 0;
    font-size: .26rem;
    color: #666;
    font-size: 600;
    border-right:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}

.mi-active-l {
    background-color: #F5F5F5;
    color: #ec6d74;
}


.good-cellect-div {
    position: absolute;
    right: 0;
    width: calc(100% - 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #eee;
}


.classify-title {
    padding:0 .2rem .2rem 0;
    font-size: .3rem;
    border-radius: .03rem;
    color: #333;
    font-family: "PingFangSC-Medium";
}

.classify-item {
    margin:.1rem .2rem .2rem;
}

.classify-box {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: .05rem;
}  



.classify-item-box {
    width: 33%;
    margin-right: .3%;
    margin-bottom: .1rem;
    padding: .1rem;
}       

     

.classify-item-box img {
    width: 100%;
    border-radius: .05rem;
}

.classify-item-box p {
    text-align: center;
    margin-top: .1rem;
    font-size: .24rem;
    color: #888;
}


/* 品牌详情 */
.brand-logo {
    position: relative;
    top: -.3rem;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    border:1px solid #ddd;
}

.brand-title {
    position: relative;
    top:-.05rem;
    left:.05rem;
}




.goods-item-pic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border:1px solid #f0f0f0;
}


.goods-item-pic img {
    width: 100%;
    height: 100%;
    border-radius: .05rem;
}



/*筛选*/
.search-mask input[type="number"] {
    display: inline-block;
    width: 2rem;
    background-color: #f0f2f5;
    border:none;
    height: .6rem;
    text-align: center;
}

.search-mask {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 999;
    transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
    transform-origin: right;
}



.search-mask-box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: .8rem;
    overflow-y: auto;
    width: calc(100% - 1rem);
    background-color: #f5f5f9;
    -webkit-overflow-scrolling: touch;
}

.search-btn-div{
    position: absolute;
    bottom: 0;
    right: 0;
    height: .8rem;
    width: calc(100% - 1rem);
}

.search-sumbit-btn {
    background-color: #ec6d74;
    color: #fff;
}

.search-label-item {
    background-color: #fff;
    padding:.1rem 0 .1rem .3rem;
}

.search-label-title {
    font-size: .3rem;
    margin-bottom: .1rem;
}

.search-label {
    display: inline-block;
    flex-direction: row;
    background-color: #f0f2f5;
    width: 30%;
    height: .6rem;
    line-height: .6rem;
    border-radius: .05rem;
    margin-right: .2rem;
    margin-bottom: .2rem;
    text-align: center;
    white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
}


/*直播红包*/
.bouns-lost {
    position: absolute;
    top: 12%;
    font-size: .35rem;
    color: #f00;
    width: 3.5rem;
    text-align: center;
}

.bouns-get {
    position: absolute;
    top: 15%;
    left: 50%;
    margin-left: -1.65rem;
    font-size: .35rem;
    color: #fff;
    width: 3.5rem;
    text-align: center;
}



.bouns-use {
    position: absolute;
    display: inline-block;
    top: 55%;
    left: 50%;
    margin-left: -1.5rem;
    font-size: .35rem;
    color: #fff;
    width: 3rem;
    padding:.2rem 0;
    border:2px solid #fff;
    border-radius: .5rem;
    text-align: center;
}


/*pslider组件*/
.p-slider-box {
    overflow-x: hidden;
    padding-top: .4rem;
    padding-bottom:.5rem;
}

.p-slider-li {
    position: absolute;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    transform: translate3d(0,0,0);
}

.next-slider {
    transform: translate3d(.2rem,.7rem,0);
}

.p-slider-box .active-slider {
    position: relative !important;
    z-index: 2;
    padding-bottom: .3rem;
}


.order-good-item {
    background-color: #fff;
    padding: .1rem;
    width: 90%;
    border-radius: .1rem;
    box-shadow: 1px 2px 10px #aaa;
    margin: 0 auto;
    margin-bottom: 10px;
}

.me-plus {
    position: relative;
    top: -.15rem;
    left: 0;
    font-size: .26rem;
}


/*运输费用规则说明*/
.freight-rule {
    height: auto;
    overflow:hidden;
    transition: height ease 0.5s;
}

.opacity-ani {
    opacity: 0;
    transition: opacity ease 0.5s;
 }

.freight-rule-expand {
    height: 0;
}

.ani-box {
    position: relative;
    width: .4rem;
    height: .4rem;
    -webkit-transform:translate3d(0,-.05rem,0);
}

.ani-cross{ 
    display: inline-block; 
    width: .4rem;
    height:.05rem; 
    background: #888;
    line-height: 0;
    font-size:0;
    -webkit-transform:translate3d(0,0,0) rotate(135deg) scale(.4);
    transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform scale(.4);
}
.ani-cross:after{
    content:'';
    display:inline-block;
    width: .4rem;
    height:.05rem; 
    background: #888;
    -webkit-transform:translate3d(.18rem,.18rem,0) rotate(-90deg);
    transition: .5s cubic-bezier(.25, .1, .3, 1.5) transform;
}


.cross-freight {
-webkit-transform: translate3d(.3rem,.3rem,0) rotate(-135deg) scale(1);
    transform: translate3d(-.3rem,.05rem,0) rotate(-135deg) scale(1); 
    transition: .5s transform;
    -webkit-transition: .5s transform;
    background: #888;
}

.cross-freight:after {
-webkit-transform:rotate(90deg);
    transform: rotate(90deg);
    transition: .5s transform;
    -webkit-transition: .5s transform;
    background: #888;
}



.transverse-bar {
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 0;
    height: .05rem;
    width: 2rem;        
    background-color: rgba(0,0,0,.5);
    border-radius: 1rem;
    z-index: 99999;
}
.shop_info {
    display: flex;
    align-items: center;
    margin:0 .1rem;
    padding: 0.1rem 0;
}
.shop_div{
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.1rem;
}
.shop_div .shop_img{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}
.sell-name {
    color: #aaa;
    min-width: 1.2rem;
}
.sell-num {
    color: #aaa;
}