/* 安卓全屏模拟标题 */
.block-title {
    height: 2.5rem;
    background: #373b3e;
    padding: 0 2.8rem;
    color: #fff;
    font-size: 0.85rem;
    line-height: 2.7rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    display: none;
}

.block-title:before {
    content: '';
    border-left: 1px solid #313336;
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 2.2rem;
}

.player-fullscreen .block-title {
    display: block;
}

/* 视频播放 区域*/
.block-video {
    height: 11rem;
    background-color: #000;
    background-image: url("../images/preview-cover.jpg");
    background-position: 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.fullscreen .block-video {
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.block-video .video {
    height: 100%;
    width: 100%;
    object-position: 0 0;
    object-fit: fill;
}

.fullscreen .block-video .video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.player-fullscreen .block-video {
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.player-fullscreen .block-video .video {
    object-fit: contain;
    object-position: 0px 50px;
}
.prompt .live-tips {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    text-align: center;
    color: #fff;
    display: none;
}

.prompt .live-tips.loading {
    display: block;
}

.prompt .live-tips .inner {
    height: 2rem;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -1rem;
}

.fullscreen .prompt .live-tips .inner {
    position: relative;
    height: auto;
}

.prompt .live-tips .inner .date {
    color: #118cff;
    font-size: 0.65rem;
}

.fullscreen .prompt .live-tips {
    background: rgba(0, 0, 0, 0.3);
    padding-top: 4rem;
}

.player-fullscreen .prompt .live-tips {
    padding-top: 8rem;
}

.fullscreen .prompt .live-tips .inner {
    width: 70%;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.6rem 0;
    margin: auto;
    border-radius: 0.3rem;
}

.prompt .live-tips.play .inner .icon {
    height: 2rem;
    font-size: 2rem;
    line-height: 2rem;
}

.fullscreen .prompt .live-tips.play .inner {
    width: 4rem;
}

/* 直播信息(顶部) 区域 */
.block-info {
    height: 1.7rem;
    width: auto;
    max-width: 50%;
    position: absolute;
    top: 0.4rem;
    left: 0.5rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 11;
}

.player-fullscreen .block-info {
    top: 2.9rem;
}

.block-info .live-info {
    height: 1.6rem;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.25rem;
    border-radius: 3px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.block-info .live-info .face {
    height: 1.1rem;
    width: 1.1rem;
    border-radius: 1.1rem;
    background: yellow;
}

.block-info .live-info .face img {
    height: 1.1rem;
    width: 1.1rem;
    display: block;
    border-radius: 1.1rem;
}

.block-info .live-info .text {
    width: 100%;
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.1rem;
    padding: 0 0.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.block-info .live-info .btn-favorite {
    height: 1.1rem;
    padding:0 0.2rem;
    color: #fff;
    font-size: 0.6rem;
    background: #118cff;
    text-align: center;
    border-radius: 0.3rem;
    line-height: 1.2rem;
}

.block-info .live-info .btn-favorite.disabled {
    background: #f95959;
}

.block-info .btn-gifts {
    height: 1.6rem;
    width: 1.6rem;
    margin-left: 0.4rem;
}

.fullscreen .block-info .btn-gifts {
    width: 9.5rem;
    margin-left: 0;
    position: absolute;
    left: -0.5rem;
    top: 2.2rem;
}

.fullscreen .block-info .btn-gifts .inner {
    height: 2rem;
    width: 2rem;
    position: absolute;
    top: -0.2rem;
    left: 0.5rem;
    z-index: 1;
}

.fullscreen .block-info .btn-gifts .text {
    background: #fdac6d;
    -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0));
    line-height: 1.6rem;
    color: #fff;
    font-size: 0.65rem;
    padding-left: 2.8rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
}

.block-info .btn-gifts .inner {
    height: 1.6rem;
    width: 1.6rem;
    background-image: url("../images/icon-gifts.png");
    background-position: 0 0;
    background-size: 100%;
}

.block-info .btn-gifts .text {
    display: none;
}

/* 直播观看人数(顶部) 区域 */
.block-online {
    width: auto;
    max-width: 40%;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.6rem;
    z-index: 11;
}

.player-fullscreen .block-online {
    top: 3rem;
}

.block-online .online {
    color: #fff;
    text-align: right;
}

.block-online .mycard {
    height: 1.1rem;
    width: auto;
    display: block;
    background-color: #020202;
    background-image: url("../images/icon-myacard.png");
    background-position: 1px center;
    background-size: 1rem;
    background-repeat: no-repeat;
    padding: 0 0.2rem 0 1.1rem;
    margin-top: 0.2rem;
    color: #d0a762;
    border-radius: 3px;
    line-height: 1.2rem;
}

/* 视频播放 区域*/
.block-tab {
    height: 2.2rem;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 2;
}

.fullscreen .block-tab {
    display: none;
}

.player-fullscreen .block-tab {
    top: 13.5rem;
}

.block-tab:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #eaeaea;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.block-tab a {
    width: 100%;
    line-height: 2.2rem;
    text-align: center;
    font-size: 0.7rem;
    color: #333;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    overflow: hidden;
}

.block-tab a.active {
    color: #118cff;
}

.block-tab a.active:before {
    content: '';
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0;
    border-bottom: 2px solid #118cff;
}

/* 内容 区域 */
.block-content {
    background: #fafafa;
    position: absolute;
    top: 13.2rem;
    bottom: 2.8rem;
    left: 0;
    right: 0;
    z-index: 1;
    overflow: hidden;
}

.fullscreen .block-content {
    height: 15rem;
    width: 70%;
    background: none;
    margin-left: 0.5rem;
    top: auto;
}

.player-fullscreen .block-content {
    /*top: 15.7rem;*/
}

.block-content .layer-enter {
    height: 1.5rem;
    width: 9.5rem;
    position: absolute;
    top: 2rem;
    left: 0;
    background: url("../images/bg-enter.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    z-index: 10;
    font-size: 0.7rem;
    line-height: 1.5rem;

    left: 100%;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    opacity: 0;
}

.block-content .layer-enter.in {
    left: 0;
    opacity: 1;
}

.block-content .layer-enter.out {
    left: -100%;
    opacity: 0;
}

.block-content .layer-enter .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
    max-width: 4.5rem;
    padding-left: 0.3rem;
}

.block-content .layer-enter .text {
    width: 5rem;
    padding-left: 4px;
    float: left;
}

.block-content .layer-at {
    width: auto;
    padding: 0.4rem 0.4rem 0.4rem 1.4rem;
    border: 1px solid #d9d9d9;
    border-radius: 0 1rem 1rem 0;
    font-size: 0.7rem;
    position: absolute;
    top: 2px;
    left: 0;
    background: #ededed;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 2;
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
}

.block-content .layer-at.in {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.fullscreen .block-content .layer-at {
    background: rgba(255, 255, 255, 0.8);
    padding: 0.4rem 0.4rem 0.4rem 1.6rem;
    border: 0;
    position: absolute;
    top: -2.2rem;
    left: -0.5rem;
}

.block-content .layer-at .layer-close {
    border: 0;
    color: #cccccc;
    left: 0.6rem;
    top: 0;
}

.block-content .layer-at .at-text {
    max-width: 10rem;
    padding-right: 0.4rem;
    color: #0e0e0e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.block-content .layer-at .at-icon {
    height: 1.2rem;
    width: 1.2rem;
    background: #f95959;
    border-radius: 1.2rem;
    font-size: 0.9rem;
    color: #fff;
    line-height: 1.2rem;
    text-align: center;
}

.block-content .tab-content {
    height: 100%;
    display: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.block-content .tab-content[data-tab="interaction"] {
    padding-right: 2.2rem;
}
.fullscreen .block-content .tab-content {
    background: none;
}
.fullscreen .block-content .tab-content[data-tab="interaction"] {
    padding-right: 0;
}

.block-content .tab-content[data-tab='chat'] {
    display: block;
    padding-top: 0.5rem;
}

.fullscreen .block-content .tab-content[data-tab='chat'] {
    height: 15rem;
}

/* 消息样式 */
.block-content .tab-content .msg {
    width: 100%;
    padding: 0 0.5rem 0.5rem;
    font-size: 0.75rem;
    word-break:break-all;
    word-wrap:break-word;
    display: block;
}

.block-content .tab-content .msg.notice,
.block-content .tab-content .msg.notice .content {
    color: #ef4f4f;
}

.fullscreen .block-content .tab-content .msg {
    background: rgba(255, 255, 255, 0.4);
    padding: 0.1rem 0.5rem;
    margin-bottom: 0.3rem;
    border-radius: 0.4rem;
}

.fullscreen .block-content .tab-content .msg.nopadding {
    padding: 0;
    background: none;
    display: block;
}

.block-content .tab-content .msg a {
    color: #118cff;
}

.block-content .tab-content .msg .tip {
    width: 100%;
    text-align: center;
}

.block-content .tab-content .msg .tip .text {
    background: #ccc;
    color: #fff;
    font-size: 0.65rem;
    line-height: 1.2rem;
    padding: 0 0.5rem;
    border-radius: 3px;
    display: inline-block;
}

.fullscreen .block-content .tab-content .msg .tip .text {
    background: rgba(204, 204, 204, 0.6);
}

.block-content .tab-content .msg .nickname {
    color: #118cff;
    display: inline;
    font-size:0.6rem;
}

.block-content .tab-content .msg .content {
    color: #444;
    display: inline;
    font-size:0.6rem;
}

.block-content .tab-content .msg .content img {
    max-width: 50%;
    width: auto;
    height: auto;
    display: inline-block;
}

.block-content .tab-content .msg .content img.face {
    max-width: 24px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.fullscreen .block-content .tab-content .msg .content img {
    border-radius: 0.1rem;
}

.block-content .tab-content .msg .content .coupon,
.block-content .tab-content .msg .content .redpack {
    width: auto;
    max-width: 80%;
    height: 2.5rem;
    padding: 0 0.4rem 0 2.2rem;
    background-color: #f44649;
    background-image: url("../images/icon-redpack.png");
    background-position: 0.2rem center;
    background-size: 2rem;
    background-repeat: no-repeat;
    border-radius: 0.4rem;
    line-height: 1rem;
    color: #fff;
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.block-content .tab-content .msg .content .coupon p.desc,
.block-content .tab-content .msg .content .redpack p.desc {
    font-size: 0.65rem;
    line-height: 0.7rem;
}

.block-content .tab-content .msg .content .redpack.drew {
    background-color: #faa1a1;
}

.fullscreen .block-content .tab-content .msg .content .coupon,
.fullscreen .block-content .tab-content .msg .content .redpack {
    max-width: 100%;
    background-color: rgba(244, 70, 73, 0.9);
}

.fullscreen .block-content .tab-content .msg .content .redpack.drew {
    background-color: rgba(250, 161, 161, 0.9);
}

.block-content .tab-content .msg .content .conpon:empty,
.block-content .tab-content .msg .content .redpack:empty {
    background-position: center center;
}

.block-content .tab-content .msg .content .coupon {
    background-color: #4e9afe;
    background-image: url("../images/icon-coupon.png");
}

.block-content .tab-content .msg .content .coupon.drew {
    background-color: #91caff;
}

.fullscreen .block-content .tab-content .msg .content .coupon {
    background-color: rgba(78, 154, 254, 0.9);
}

.fullscreen .block-content .tab-content .msg .content .coupon.drew {
    background-color: rgba(142, 202, 255, 0.9);
}

.block-content .tab-content .msg .content .goods {
    width: 80%;
    height: 3.8rem;
    background-color: #eee;
    border-radius: 0.4rem;
    padding: 0.4rem 0.6rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.fullscreen .block-content .tab-content .msg .content .goods {
    width: 90%;
    background-color: rgba(238, 238, 238, 0.9);
}

.block-content .tab-content .msg .content .goods .thumb {
    height: 3rem;
    width: 3rem;
    background: #ddd;
    border-radius: 0.2rem;
}

.block-content .tab-content .msg .content .goods .thumb img {
    max-width: 3rem !important;
    height: 3rem;
    width: 3rem;
    display: block;
    border-radius: 0.2rem;
}

.block-content .tab-content .msg .content .goods .info {
    width: 1%;
    height: 3rem;
    margin-left: 0.4rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.block-content .tab-content .msg .content .goods .info .title {
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 0.75rem;
}

.block-content .tab-content .msg .content .goods .info .price {
    line-height: 1rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    vertical-align: middle;
    margin-top: 0.4rem;
}

.block-content .tab-content .msg .content .goods .info .price .num {
    color: #f95959;
    font-size: 0.85rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: inline-block;
}

.block-content .tab-content .msg .content .goods .info .price .btn-buy {
    padding: 0 0.2rem;
    background: #e64a4c;
    border-radius: 0.2rem;
    color: #fff;
    font-size: 0.55rem;
    display: inline-block;
    vertical-align: middle;
}

.block-content .tab-content .msg .btn-repeal {
    height: 0.9rem;
    line-height: 0.9rem;
    color: #999;
    background: #f3f3f3;
    text-align: center;
    border-radius: 0.2rem;
    font-size: 0.55rem;
    margin-left: 0.2rem;
    padding: 0 0.2rem;
    display: none;
    vertical-align: middle;
}

.block-content .tab-content .msg .btn-repeal.show {
    display: inline-block;
}

/* 房间信息 */
.block-content .tab-content .shop-info {
    height: 3.6rem;
    background: #fff;
    padding: 0.95rem 0.5rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
}

.block-content .tab-content .shop-info:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #eaeaea;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.block-content .tab-content .shop-info .logo,
.block-content .tab-content .shop-info .logo img {
    height: 1.7rem;
    width: 1.7rem;
    display: block;
    border-radius: 1.7rem;
}

.block-content .tab-content .shop-info .info {
    width: 1%;
    padding: 0 0.5rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
}

.block-content .tab-content .shop-info .btn-enter {
    height: 1.25rem;
    background: #3482fe;
    color: #fff;
    line-height: 1.25rem;
    font-size: 0.65rem;
    padding: 0 0.5rem;
    border-radius: 1.25rem;
}

.block-content .tab-content .room-info {
    height: auto;
    background: #fff;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    font-size: 0.7rem;
    position: relative;
}

.block-content .tab-content .room-info p {
    line-height: 1.4rem;
}

.block-content .tab-content .room-info:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #eaeaea;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.block-content .tab-content .room-info:after {
    content: '';
    height: 0.7rem;
    position: absolute;
    top: 0.85rem;
    left: 0.5rem;
    border-left: 4px solid #3482fe;
}

/* 浮动图标 */
.block-icon {
    width: 2.45rem;
    height: auto;
    position: fixed;
    right: 0.25rem;
    bottom: 4.5rem;
    z-index: 100;
}

.block-icon .btn-gift {
    height: 2.2rem;
    width: 2.45rem;
    background-image: url("../images/icon-gift2.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 0.85rem;
}

.block-icon .btn-content {
    height: 2.2rem;
    width: 2.45rem;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 0.85rem;
}
.block-icon .btn-content.btn-show{
    background-image: url("../images/btn-show.png");
    display: none;
}
.block-icon .btn-content.btn-hide{
    background-image: url("../images/btn-hide.png");
}

.block-icon .btn-like {
    height: 2.2rem;
    width: 2.45rem;
    background-image: url("../images/icon-like2.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 0.85rem;
}

.block-icon .btn-share {
    height: 2.2rem;
    width: 2.45rem;
    background-image: url("../images/icon-share2.png");
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 0.85rem;
    display: block;
}

/* 公告浮层 */
.block-notice {
    height: 1.4rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0 0.2rem;
    line-height: 1.4rem;
    font-size: 0.7rem;
    position: absolute;
    top: 7.45rem;
    left: 0;
    right: 0;
    z-index: 2;
    display: none;
    overflow: hidden;
}

.block-notice .inner {
    height: 1.4rem;
    position: absolute;
    top: 0;
    left: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
    color: #fff;
    white-space:nowrap;
}

.fullscreen .block-notice {
    top: 2.8rem;
}

.player-fullscreen .block-notice {
    top: 5rem;
}

/* 商品列表 */
.goods-item {
    padding: 0.5rem;
    position: relative;
    background: #fff;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.goods-item:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #eaeaea;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

.goods-item .thumb,
.goods-item .thumb img {
    height: 3.4rem;
    width: 3.4rem;
    display: block;
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
}

.goods-item .info {
    max-height: 3.4rem;
    padding-left: 0.5rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: table-cell;
}

.goods-item .info .title {
    max-height: 2rem;
    margin-bottom: 0.2rem;
    line-height: 1rem;
    font-size: 0.7rem;
    color: #444;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.goods-item .info .price {
    height: 1.2rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    vertical-align: middle;
    font-size: 0.6rem;
}

.goods-item .info .price .num {
    color: #f95959;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 1.2rem;
    vertical-align: middle;
    display: block;
}

.goods-item .info .price .num span {
    display: inline-block;
    vertical-align: middle;
}

.goods-item .info .price .num .label {
    display: inline-block;
    height: 0.85rem;
    line-height: 0.85rem;
    background: #f4484a;
    padding: 0 0.1rem;
    color: #fff;
    font-size: 0.55rem;
}

.goods-item .info .price .num .bigprice {
    height: 1.2rem;
    line-height: 1.1rem;
    font-size: 0.8rem;
    padding: 0 0.2rem;
    color: #f4484a;
}

.goods-item .info .price .num .product {
    color: #999;
    text-decoration: line-through;
}

.goods-item .info .price .btn-buy {
    border: 1px solid #e64a4c;
    font-size: 0.6rem;
    padding: 0 0.3rem;
    border-radius: 1rem;
    line-height: 1.15rem;
    display: inline-block;
    color: #e64a4c;
}

/* 输入区域 */
.block-input {
    height: 2.8rem;
    background: #f7f7f7;
    padding: 0.5rem;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 100 !important;
}

.block-input:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #d2d2d2;
}

.block-input.focus .btn-plus,
.block-input.focus .btn-goods,
.block-input.focus .btn-like {
    display: none;
}

.block-input.focus .input {
    margin-left: 0;
}

/*Full* 全屏样式 */
.fullscreen .block-input {
    background: transparent;
}

.fullscreen .block-input:before {
    border: 0;
}

/* 底部输入框 区域 */
.block-input .btn-goods,
.block-input .btn-plus,
.block-input .btn-like {
    height: 1.8rem;
    width: 1.8rem;
    background-position: 0 0;
    background-size: 100%;
}

.block-input .btn-goods {
    background-image: url("../images/icon-goods.png");
}

.block-input .btn-plus {
    background-image: url("../images/icon-plus.png");
    margin-right: 0.5rem;
}

.block-input .input {
    background: #e4e4e4;
    margin: 0 0.5rem 0;
    border-radius: 4px;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.block-input .input input,
.block-input .input .input-place {
    height: 1.8rem;
    background: transparent;
    padding: 0 0.4rem;
    border: 0;
    border-radius: 0;
    outline: none;
    color: #666;
    font-size: 0.75rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
}

.block-input .input input {
    display: none;
}

.block-input .input .input-place {
    line-height: 1.8rem;
}

.block-input .input .input-place a {
    color: #118cff;
}

.fullscreen .block-input .input {
    background: rgba(0, 0, 0, 0.2);
}

.fullscreen .block-input .input input {
    color: #fff;
}

.fullscreen .block-input .input ::-webkit-input-placeholder {
    color:#fff;
}

.fullscreen .block-input .input :-moz-placeholder {
    color: #fff;
}
.fullscreen .block-input .input ::-moz-placeholder {
    color:#999;
}
.fullscreen .block-input .input :-ms-input-placeholder {
    color:#999;
}

.block-input .input .btn-emoji {
    height: 1.8rem;
    width: 1.8rem;
    font-family: "icon" !important;
    line-height: 1.9rem;
    text-align: center;
    font-size: 1.1rem;
    color: #909090;
    display: none;
}

.fullscreen .block-input .input .btn-emoji.active,
.block-input .input .btn-emoji.active {
    color: #00bbee;
}

.fullscreen .block-input .input .btn-emoji {
    color: #fff;
}

.block-input .input .btn-emoji:before {
    content: "\e76d";
}

.block-input .btn-like {
    background-image: url("../images/icon-like.png");
}

.block-input .btn-send {
    height: 1.8rem;
    width: 3.5rem;
    background: #ccc;
    color: #fff;
    line-height: 1.8rem;
    text-align: center;
    border-radius: 4px;
    display: none;
}

.block-input .btn-send.active {
    background: #00bbee;
}

.block-input.focus .btn-send {
    display: block;
}

.show-emoji .block-input {
    bottom: 9rem;
}

.show-plus .block-input {
    bottom: 5rem;
}

.show-emoji .block-content {
    bottom: 11.8rem;
}

.show-plus .block-content {
    bottom: 7.8rem;
}

.show-plus .block-plus,
.show-emoji .block-emoji {
    display: block;
}

/* 表情列表 */
.block-plus,
.block-emoji {
    background: #f7f7f7;
    position: fixed;
    height: 9rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
}

.block-emoji {
    background: #fff;
    padding: 0.3rem;
    overflow-y: auto;
}

.block-plus {
    height: 5rem;
    background: #f4f4f4;
    padding: 0.8rem 0.2rem
}

.block-plus:before,
.block-emoji:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #d2d2d2;
}

.block-plus .item {
    height: 2.5rem;
    width: 25%;
    font-size: 0.7rem;
    float: left;
}

.block-plus .item .item-icon {
    height: 2.5rem;
    width: 2.5rem;
    background: #fafafc;
    margin: auto;
    color: #c9c9c8;
    border: 1px solid #c9c9c8 !important;
    border-radius: 0.2rem;
    line-height: 2.5rem;
    text-align: center;
}

.block-plus .item .item-icon .icon {
    font-size: 1.4rem;
    color: #888;
}

.block-plus .item .item-text {
    width: 100%;
    margin: auto;
    text-align: center;
    line-height: 1.2rem;
    color: #777;
}

.block-emoji .item {
    width: 1.6rem;
    height: 1.6rem;
    background: url("../images/face/allface.jpg");
    background-size: 1.6rem auto;
    margin: 0.1rem 0.2rem;
    float: left;
}


.block-emoji .item:nth-child(1){background-position: 0 -0rem;}
.block-emoji .item:nth-child(2){background-position: 0 -1.6rem;}
.block-emoji .item:nth-child(3){background-position: 0 -3.2rem;}
.block-emoji .item:nth-child(4){background-position: 0 -4.8rem;}
.block-emoji .item:nth-child(5){background-position: 0 -6.4rem;}
.block-emoji .item:nth-child(6){background-position: 0 -8rem;}
.block-emoji .item:nth-child(7){background-position: 0 -9.6rem;}
.block-emoji .item:nth-child(8){background-position: 0 -11.2rem;}
.block-emoji .item:nth-child(9){background-position: 0 -12.8rem;}
.block-emoji .item:nth-child(10){background-position: 0 -14.4rem;}
.block-emoji .item:nth-child(11){background-position: 0 -16rem;}
.block-emoji .item:nth-child(12){background-position: 0 -17.6rem;}
.block-emoji .item:nth-child(13){background-position: 0 -19.2rem;}
.block-emoji .item:nth-child(14){background-position: 0 -20.8rem;}
.block-emoji .item:nth-child(15){background-position: 0 -22.4rem;}
.block-emoji .item:nth-child(16){background-position: 0 -24rem;}
.block-emoji .item:nth-child(17){background-position: 0 -25.6rem;}
.block-emoji .item:nth-child(18){background-position: 0 -27.2rem;}
.block-emoji .item:nth-child(19){background-position: 0 -28.8rem;}
.block-emoji .item:nth-child(20){background-position: 0 -30.4rem;}
.block-emoji .item:nth-child(21){background-position: 0 -32rem;}
.block-emoji .item:nth-child(22){background-position: 0 -33.6rem;}
.block-emoji .item:nth-child(23){background-position: 0 -35.2rem;}
.block-emoji .item:nth-child(24){background-position: 0 -36.8rem;}
.block-emoji .item:nth-child(25){background-position: 0 -38.4rem;}
.block-emoji .item:nth-child(26){background-position: 0 -40rem;}
.block-emoji .item:nth-child(27){background-position: 0 -41.6rem;}
.block-emoji .item:nth-child(28){background-position: 0 -43.2rem;}
.block-emoji .item:nth-child(29){background-position: 0 -44.8rem;}
.block-emoji .item:nth-child(30){background-position: 0 -46.4rem;}
.block-emoji .item:nth-child(31){background-position: 0 -48rem;}
.block-emoji .item:nth-child(32){background-position: 0 -49.6rem;}
.block-emoji .item:nth-child(33){background-position: 0 -51.2rem;}
.block-emoji .item:nth-child(34){background-position: 0 -52.8rem;}
.block-emoji .item:nth-child(35){background-position: 0 -54.4rem;}
.block-emoji .item:nth-child(36){background-position: 0 -56rem;}
.block-emoji .item:nth-child(37){background-position: 0 -57.6rem;}
.block-emoji .item:nth-child(38){background-position: 0 -59.2rem;}
.block-emoji .item:nth-child(39){background-position: 0 -60.8rem;}
.block-emoji .item:nth-child(40){background-position: 0 -62.4rem;}
.block-emoji .item:nth-child(41){background-position: 0 -64rem;}
.block-emoji .item:nth-child(42){background-position: 0 -65.6rem;}
.block-emoji .item:nth-child(43){background-position: 0 -67.2rem;}
.block-emoji .item:nth-child(44){background-position: 0 -68.8rem;}
.block-emoji .item:nth-child(45){background-position: 0 -70.4rem;}
.block-emoji .item:nth-child(46){background-position: 0 -72rem;}
.block-emoji .item:nth-child(47){background-position: 0 -73.6rem;}
.block-emoji .item:nth-child(48){background-position: 0 -75.2rem;}
.block-emoji .item:nth-child(49){background-position: 0 -76.8rem;}
.block-emoji .item:nth-child(50){background-position: 0 -78.4rem;}
.block-emoji .item:nth-child(51){background-position: 0 -80rem;}
.block-emoji .item:nth-child(52){background-position: 0 -81.6rem;}
.block-emoji .item:nth-child(53){background-position: 0 -83.2rem;}
.block-emoji .item:nth-child(54){background-position: 0 -84.8rem;}
.block-emoji .item:nth-child(55){background-position: 0 -86.4rem;}
.block-emoji .item:nth-child(56){background-position: 0 -88rem;}
.block-emoji .item:nth-child(57){background-position: 0 -89.6rem;}
.block-emoji .item:nth-child(58){background-position: 0 -91.2rem;}
.block-emoji .item:nth-child(59){background-position: 0 -92.8rem;}
.block-emoji .item:nth-child(60){background-position: 0 -94.4rem;}
.block-emoji .item:nth-child(61){background-position: 0 -96rem;}
.block-emoji .item:nth-child(62){background-position: 0 -97.6rem;}
.block-emoji .item:nth-child(63){background-position: 0 -99.2rem;}
.block-emoji .item:nth-child(64){background-position: 0 -100.8rem;}
.block-emoji .item:nth-child(65){background-position: 0 -102.4rem;}
.block-emoji .item:nth-child(66){background-position: 0 -104rem;}
.block-emoji .item:nth-child(67){background-position: 0 -105.6rem;}
.block-emoji .item:nth-child(68){background-position: 0 -107.2rem;}
.block-emoji .item:nth-child(69){background-position: 0 -108.8rem;}
.block-emoji .item:nth-child(70){background-position: 0 -110.4rem;}
.block-emoji .item:nth-child(71){background-position: 0 -112rem;}
.block-emoji .item:nth-child(72){background-position: 0 -113.6rem;}
.block-emoji .item:nth-child(73){background-position: 0 -115.2rem;}
.block-emoji .item:nth-child(74){background-position: 0 -116.8rem;}
.block-emoji .item:nth-child(75){background-position: 0 -118.4rem;}
.block-emoji .item:nth-child(76){background-position: 0 -120rem;}
.block-emoji .item:nth-child(77){background-position: 0 -121.6rem;}
.block-emoji .item:nth-child(78){background-position: 0 -123.2rem;}
.block-emoji .item:nth-child(79){background-position: 0 -124.8rem;}
.block-emoji .item:nth-child(80){background-position: 0 -126.4rem;}
.block-emoji .item:nth-child(81){background-position: 0 -128rem;}
.block-emoji .item:nth-child(82){background-position: 0 -129.6rem;}
.block-emoji .item:nth-child(83){background-position: 0 -131.2rem;}
.block-emoji .item:nth-child(84){background-position: 0 -132.8rem;}
.block-emoji .item:nth-child(85){background-position: 0 -134.4rem;}
.block-emoji .item:nth-child(86){background-position: 0 -136rem;}
.block-emoji .item:nth-child(87){background-position: 0 -137.6rem;}
.block-emoji .item:nth-child(88){background-position: 0 -139.2rem;}
.block-emoji .item:nth-child(89){background-position: 0 -140.8rem;}
.block-emoji .item:nth-child(90){background-position: 0 -142.4rem;}

.block-emoji .item img {
    height: 1.2rem;
    width: 1.2rem;
    vertical-align: middle;
}

.layer-mask {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    display: none;
}

/* 红包弹窗 */
.layer-redpack {
    height: 19rem;
    width: 15rem;
    background: #d94e4e;
    border-radius: 0.5rem;
    margin:  -9.5rem 0 0 -7.5rem;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    display: none;
}

.layer:not(.layer-goods):not(.layer-at).in {
    display: block;
    -webkit-animation: layerIn 0.3s;
    -ms-animation: layerIn 0.3s;
    animation: layerIn 0.3s;
}

@keyframes layerIn {
    0% {
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }
    70% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.layer-redpack.open {
    background: #f95959;
    overflow: hidden;
}

.layer-redpack .layer-close {
    height: 1.5rem;
    border: 0;
    font-size: 2rem;
    color: #b82727;
    font-weight: lighter;
    line-height: 1.5rem;
    font-size: 1.5rem;
    position: absolute;
    top: 0.4rem;
    right: 0.2rem;
    left: auto;
    z-index: 100;
}

.layer-redpack .redpack-bg {
    height: 15rem;
    width: 15rem;
    border-radius: 0.5rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.layer-redpack.open .redpack-bg {
    display: none;
}

.layer-redpack .redpack-bg:before {
    content: '';
    height: 20rem;
    width: 24rem;
    background-color: #f95959;
    background-image: url("../images/redpack-bg.png");
    background-repeat: no-repeat;
    background-size: 15rem;
    background-position: 4.5rem 7.5rem;
    border-radius: 0 0 50% 50%;
    position: absolute;
    bottom: 0.5rem;
    left: -4.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.layer-redpack .redpack-title {
    color: #fff;
    font-size: 1.35rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: 6rem;
    z-index: 100;
}

.layer-redpack.open .redpack-title {
    font-size: 0.8rem;
    top: 0.8rem;
    left: 1rem;
    right: 1.8rem;
}

.layer-redpack .redpack-draw {
    height: 4rem;
    width: 4rem;
    background: #fad22c;
    margin-left: -2rem;
    border-radius: 4rem;
    color: #eb2020;
    font-size: 1.5rem;
    line-height: 4rem;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 50%;
    bottom: 2.8rem;
}

.layer-redpack.open .redpack-draw {
    display: none;
}

.layer-redpack .redpack-draw.rotate {
    -webkit-animation: drawRotate 1.5s ease infinite;
    -ms-animation: drawRotate 1.5s ease infinite;
    animation: drawRotate 1.5s ease infinite;
}

@keyframes drawRotate {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

.layer-redpack .redpack-info {
    display: none;
}

.layer-redpack.open .redpack-info {
    width: 12.6rem;
    height: 5.4rem;
    background-color: #fff;
    background-image: url("../images/redpack-detail-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center 0.7rem;
    margin-left: -6.3rem;
    text-align: center;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: block;
}

.layer-redpack.open .redpack-info .price {
    height: 3.5rem;
    font-size: 3rem;
    line-height: 4.5rem;
    color: #ff8706;
}

.layer-redpack.open .redpack-info .price.small {
    font-size: 0.9rem;
}

.layer-redpack.open .redpack-info .price span {
    font-size: 1rem;
}

.layer-redpack.open .redpack-info .type {
    font-size: 0.65rem;
    line-height: 1.4rem;
    color: #ff8400;
}

.layer-redpack .redpack-list {
    display: none;
}

.layer-redpack.open .redpack-list {
    position: absolute;
    top: 7.9rem;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    display: block;
}

.layer-redpack.open .redpack-list .title {
    height: 2.4rem;
    padding: 0 1.1rem;
    color: #fff;
    font-size: 0.65rem;
    line-height: 2rem;
}

.layer-redpack.open .redpack-list .inner {
    height: 8.5rem;
    padding: 0 1.1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.layer-redpack.open .redpack-list .inner .item {
    height: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.5rem;
    color: #fff;
    font-size: 0.75rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.layer-redpack.open .redpack-list .inner .item .avatar,
.layer-redpack.open .redpack-list .inner .item .avatar img {
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 1.5rem;
    display: block;
}

.layer-redpack.open .redpack-list .inner .item .nickname {
    padding: 0 0.4rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* 优惠券弹窗 */
.layer-coupon,
.layer-gifts {
    width: 14.8rem;
    background: #fff;
    margin: -5.7rem 0 0 -7.4rem;
    border-radius: 0.5rem;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    display: none;
}

.layer-gifts {
    max-height: 16rem;
    margin-top: -7.5rem;
}

.layer-coupon .coupon-close {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
    font-size: 2rem;
    color: #666;
    font-weight: lighter;
    line-height: 1.5rem;
    height: 1.5rem;
    z-index: 100;
}

.layer-coupon .coupon-title {
    height: 3rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 3rem;
    color: #fff;
    font-size: 0.8rem;
    z-index: 1;
}

.layer-coupon.fail .coupon-title {
    height: 1.8rem;
    margin-top: 0.7rem;
    line-height: 1.7rem;
    color: #000;
    position: relative;
}

.layer-coupon .coupon-fail-title {
    display: none;
}

.layer-coupon.fail .coupon-fail-title {
    font-size: 0.7rem;
    color: #999;
    text-align: center;
    display: block;
}

.layer-coupon .coupon-inner {
    height: 6.8rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius:  0.5rem 0.5rem 0 0;
}

.layer-coupon.fail .coupon-inner {
    display: none;
}

.layer-coupon .coupon-inner .coupon-bg {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    height: 6.8rem;
    width: 20rem;
    background: #118cff;
    margin-left: -10rem;
    border-radius:  0.5rem 0.5rem 50% 50%;
    overflow: hidden;
}

.layer-coupon .coupon-inner .coupon-bg .coupon-block {
    width: 7.4rem;
    height: 5rem;
    background: #deefff;
    margin: 3rem auto 0;
    text-align: center;
    position: relative;
}

.layer-coupon .coupon-inner .coupon-bg .coupon-block .price {
    height: 2.2rem;
    line-height: 2.5rem;
    font-size: 0.8rem;
}

.layer-coupon .coupon-inner .coupon-bg .coupon-block .price .money {
    font-size: 1.5rem;
}

.layer-coupon .coupon-inner .coupon-bg .coupon-block .desc {
    font-size: 0.65rem;
    color: #666;
}

.layer-coupon .coupon-inner .coupon-bg .coupon-block .coupon-gold {
    height: 2.75rem;
    width: 2.75rem;
    background-image: url("../images/icon-gold.png");
    background-size: 100%;
    position: absolute;
    bottom: 0.5rem;
    left: -1.5rem;
}

.layer-coupon .coupon-inner .coupon-bg .coupon-block .coupon-gift {
    height: 2.75rem;
    width: 2.75rem;
    background-image: url("../images/icon-gift.png");
    background-size: 100%;
    position: absolute;
    bottom: 1rem;
    right: -1.3rem;
}

.layer-coupon .coupon-btn {
    height: 1.8rem;
    width: 100%;
    margin: 1.4rem 0;
    text-align: center;
}

.layer-coupon.fail .coupon-btn {
    display: none;
}

.layer-coupon .coupon-btn .btn {
    height: 1.8rem;
    width: 6rem;
    background: #81cdff;
    padding: 0;
    margin: 0;
    margin-right: 0.75rem;
    color: #000;
    border: 0;
    border-radius: 1.8rem;
    line-height: 1.8rem;
}
.layer-coupon .coupon-btn .btn.btn-goon{display: none;}
.layer-coupon.roomcoupon .coupon-btn .btn.btn-goon{display: inline-block;}
.layer-coupon.roomcoupon .coupon-btn .btn.btn-blue{display: none;}


.layer-coupon .coupon-btn .btn-yellow {
    margin-right: 0;
    background: #f9ca3e;
}

.layer-coupon.fail .coupon-fail {
    height: 5.6rem;
    width: 5.6rem;
    background-image: url("../images/coupon-fail.png");
    background-size: 100%;
    margin: 0.8rem auto 1.4rem;
}

.layer-coupon > .title {
    height: 3rem;
    color: #118cff;
    font-size: 0.8rem;
    line-height: 3rem;
    text-align: center;
}

.layer-coupon .item,
.layer-gifts  .coupon-item {
    height: 3.8rem;
    background: #53acfe;
    margin: 0 0.85rem;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow: hidden;
}

.layer-coupon .item .center:before,
.layer-coupon .item .center:after,
.layer-gifts  .coupon-item .center:before,
.layer-gifts  .coupon-item .center:after {
    content: '';
    height: 0.5rem;
    width: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    position: absolute;
    left: 3.75rem;
    z-index: 1;
}

.layer-coupon .item .center:before,
.layer-gifts  .coupon-item .center:before {
    top: -0.25rem;
}

.layer-coupon .item .center:after,
.layer-gifts  .coupon-item .center:after {
    bottom: -0.25rem;
}

.layer-coupon .item .left,
.layer-gifts  .coupon-item .left {
    width: 4rem;
    background: #118cff;
    line-height: 3.8rem;
    font-size: 1.25rem;
    text-align: center;
    position: relative;
}

.layer-coupon .item .left:before,
.layer-gifts  .coupon-item .left:before {
    content: '';
    width: 0.5rem;
    background-image: url("../images/coupon-side.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0 0;
    position: absolute;
    left: -0.12rem;
    top: 0;
    bottom: 0;
}

.layer-coupon .item .left span,
.layer-gifts  .coupon-item .left span {
    font-size: 0.75rem;
}

.layer-gifts  .coupon-item .center,
.layer-coupon .item .center {
    padding: 0.5rem 0.8rem;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.layer-coupon .item .center .title,
.layer-gifts  .coupon-item .center .title {
    font-size: 0.8rem;
    height:1.5rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height: 1.5rem;
}

.layer-coupon .item .center .subtitle,
.layer-gifts  .coupon-item .center .subtitle {
    font-size: 0.6rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    height:1.2rem;
    line-height: 1.2rem;
}

.layer-coupon .item .right,
.layer-gifts  .coupon-item .right {
    width: 3rem;
    background-image: url("../images/icon-coupon2.png");
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: center;
}

.layer-coupon .tip {
    margin-top: 2rem;
    text-align: center;
    color: #999;
    font-size: 0.65rem;
}

/* 店铺信息+关注 */
.layer-roominfo {
    max-height: 19rem;
    width: 15.2rem;
    background: #fff;
    padding: 1.5rem 0.9rem 0.9rem;
    margin: -9.5rem 0 0 -7.6rem;
    border-radius: 0.5rem;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    display: none;
}

.layer-roominfo .room-face {
    height: 3.8rem;
    width: 3.8rem;
    background: #fff;
    padding: 0.1rem;
    margin-left: -1.9rem;
    border-radius: 1.9rem;
    position: absolute;
    left: 50%;
    top: -2.1rem;
}

.layer-roominfo .room-face img {
    height: 3.6rem;
    width: 3.6rem;
    border-radius: 3.6rem;
}

.layer-roominfo .room-title {
    height: 1.75rem;
    color: #118cff;
    font-size: 0.85rem;
    text-align: center;
    line-height: 2.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-roominfo .room-info {
    height: 3.8rem;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    border: 1px dashed #e3e3e3;
    font-size: 0.7rem;
    line-height: 1.05rem;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.layer-roominfo .room-info p {
    height: 1.3rem;
    width: 100%;
    line-height: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-roominfo .room-qrcode {
    height: 5.7rem;
    width: 5.7rem;
    margin: 0.7rem auto 0;
}

.layer-roominfo .room-qrcode img {
    height: 5.7rem;
    width: 5.7rem;
    display: block;
}

.layer-roominfo .room-btn {
    height: 2rem;
    width: 10rem;
    background: #118cff;
    margin: 1rem auto 0;
    border-radius: 2rem;
    color: #fff;
    line-height: 2rem;
    text-align: center;
    font-size: 0.75rem;
}

.layer-roominfo .room-btn.disabled {
    background: #f95959;
}

/* 礼物弹窗 */
.layer-gifts {
    padding: 0.5rem 0;
}

.layer-gifts .inner {
    max-height: 13.5rem;
    width: 100%;
    overflow-y: scroll;
}

.layer-gifts .redpack-item {
    height: 3.8rem;
    background: #ff5555;
    margin: 0 0.85rem;
    border-radius: 0.25rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.layer-gifts .redpack-item.disabled,
.layer-gifts .coupon-item.disabled {
    position: relative;
}

.layer-gifts .redpack-item.disabled .live-mask,
.layer-gifts .coupon-item.disabled .live-mask {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    line-height: 3.8rem;
    text-align: center;
    color: #fff;
    font-size: 0.85rem;
    z-index: 1;
}

.layer-gifts .redpack-item.disabled:before {
    border-radius: 0.25rem;
}

.layer-gifts .coupon-item {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.layer-gifts .redpack-item .left {
    padding: 0.5rem 0.8rem;
    color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.layer-gifts .redpack-item .left .title {
    font-size: 0.8rem;
    line-height: 1.5rem;
}

.layer-gifts .redpack-item .left .subtitle {
    font-size: 0.6rem;
    line-height: 1.2rem;
}

.layer-gifts .redpack-item .right {
    width: 3rem;
    background-image: url("../images/icon-redpack2.png");
    background-size: 2rem;
    background-repeat: no-repeat;
    background-position: center;
}

/* 弹层关闭按钮 */
.layer-close {
    height: 1.8rem;
    width: 1.8rem;
    border: 1px solid #fff;
    border-radius: 1.8rem;
    margin-left: -0.75rem;
    font-family: "icon" !important;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    line-height: 1.8rem;
    position: absolute;
    bottom:  -2.5rem;
    left: 50%;
}

.layer-close:before {
    content: '\e602';
}

/* 商品弹层 */
.layer-goods {
    height: auto;
    max-height: 65%;
    padding-top: 1.4rem;
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%);
}

.layer-goods.in {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

.layer-goods .layer-close {
    left: auto;
    right: 0;
    bottom: auto;
    top: -0.2rem;
    z-index: 101;
    border: 0;
    color: #ccc;
}

.layer-goods .inner {
    height: 100%;
    overflow-y: auto;
    padding-bottom: 2.8rem;
}

.ico-like {
    height: 1.5rem;
    width: 1.5rem;
    color: #f90;;
    position: fixed;
    right: 30px;
    bottom: 2.5rem;
    z-index: 100;
}

.ico-like .icon {
    font-size: 2rem;
}

#liveframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 0;
    z-index: 1000;
    display: none;
}