#live {
    height: 100%;
    width: 100%;
    display: inline-block;
    text-align: center;
}

#live .search-bar:focus {
    background-color: unset;
}

#live .card.search-bar input,
#live .card.search-bar span {
    border-color: transparent !important;
}

#live .card.search-bar input {
    border-radius: 12px 0 0 12px;
}

#live .card.search-bar input:focus {
    box-shadow: unset;
}

::-webkit-input-placeholder { /* Edge */
  color: #b5b5b5 !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b5b5b5 !important;
}

::placeholder {
  color: #b5b5b5 !important;
}

#live .card.search-bar span {
    border-radius: 0 12px 12px 0 !important;
    background-color: #1f2070;
    color: #fff;
}

#live .card.search-bar span:active {
    background-color: rgba(0, 0, 0, 0.3);
    outline: unset;
}

#live .category {
    display: flex;
}

#live .category .col-4 {
    padding: 0 .5rem 10px;
}

#live .category button {
    width: 100%;
    padding: 10px;
    border-style: double;
    border-radius: 30px;
    border-color: #555e69;
    background-color: #f1f1f8;
    color: #000;
    font-size: 0.8em;
}

#live .category button:focus {
    outline: unset;
}

#live .category button.active {
    border-color: #e95d47;
    background-color: #e95d47;
    color: #fff;
}

#live .list .card {
    width: 31%;
    margin: 5px;
    padding: 0 15px;
    display: inline-block;
    text-align: left;
    font-size: .8em;
    float: left;
}

#live .list .card div {
    padding: 10px 0;
}

#live .list .card img {
    width: 100%;
    border-radius: 15px;
}

#live .list .card div.col-9 {
    padding: 10px 20px;
}

#live .list .card div.col-9 div {
    padding: 0;
}

#live .list .card div.col-9 div.title {
    color: #161615;
    display: block;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

#live .list .card div.col-9 div.time div {
    font-size: .85em;
    color: #153e8c;
}

#live .list div.record ml {
    color: rgb(140, 139, 139);
}

#live span {
    font-size: 1.05em;
    color: #fd0006;
}

@media screen and (max-width: 1024px) {
    #live ul {
        padding-left: 20px;
    }
}

@media screen and (max-width: 768px) {
    #live ul {
        padding-left: 0px;
    }

    #live .list .card {
        width: 100%;
        margin: 0 auto;
        float: unset;
    }
}

#live-content {
    text-align: left;
}

#live-content .banner {
    padding: 0 0 10px;
}

#live-content img {
    width: 100%;
    height: auto;
}

#live-content .container {
    padding-left: calc(2%);
    padding-right: calc(2%);
}

#live-content .container .title {
    display: contents;
    word-break: break-all;
    text-align: center;
}

#live-content .container h3 {
    color: #666666;
}

#live-content div {
    padding: 0 0 10px;
}

#live-content .publish span {
    color: #13b0c3;
}

#live-content .views,
#live-content .publish,
#live-content .author {
    font-size: 1em;
    color: rgb(103, 98, 98);
    padding-bottom: 0px;
}

#live-content .contents {
    padding-top: 10px;
    text-align: left;
}

#lv-mask .price em {
    text-decoration: line-through solid #ff0202;
    -webkit-text-decoration-line: line-through;
    -webkit-text-decoration-color: #ff0202;
    font-style: unset;
}

#lv-mask .price,
#lv-mask .money {
    font-size: 1.5em;
}

#lv-mask .money {
    color: #3266be;
    font-weight: bolder;
}

#lv-mask .btn {
    padding: 15px 2.5em;
}

#lv-mask .btn-signup,
#lv-mask .btn-buy {
    background-color: #F6D85B;
}

#lv-mask .btn-signup ml,
#lv-mask .btn-buy ml {
    color: #5170AD;
}

#lv-mask .button {
    padding: 0;
}

#lv-mask button:focus {
    background-color: #C4C6D3;
    box-shadow: 0 0 0.2rem #bebfcc;
}

@media screen and (max-width: 768px) {
    #live-content h1 {
        font-size: 1.5rem;
        text-align: left;
    }

    #live-content h3 {
        font-size: 1.25rem;
        text-align: left;
    }
}

#live-join input {
    font-size: 1em;
    margin: 0 .4em;
    border-radius: 12px;
    padding: 0.2em 1em;
    border: 2px solid #BCBCBC;
    box-shadow: 0 0 0.2rem #bcbcbc;
    outline: unset;
    width: 100%;
}

#live-join .desc {
    border: 1px solid #bdbdbd;
    word-break: break-all;
}

#live-join .desc h3 {
    border-bottom: 2px solid #bdbdbd;
    margin-top: 1em;
    font-size: 1.44rem;
}

#live-join .desc p {
    text-align: left;
    margin-bottom: 0;
}

#live-join p.agree {
    text-align: left;
    margin: 0;
}

#live-join [type=checkbox] {
    box-shadow: unset;
    border: unset;
    width: unset;
}

#live-join button.btn-submit {
    width: 30%;
    margin: 2em auto !important;
}

/* 2021-11-09 新增英文字 -shawn */
#live-join button.btn-submit .hidden_br {
    display:none;
}

#live-join img {
    margin: 0 auto;
    width: 55%;
}
@media screen and (max-width: 1024px) {
    .width_18{
        max-width: 23%;
    }
}
@media screen and (max-width: 768px) {
    #live-join img {
        width: 100%;
    }

    #live-join button.btn-submit {
        width: 60%;
    }
    .width_18{
        max-width: 18%;
        -webkit-max-width: 18%;
        -moz-max-width: 18%;
        -ms-max-width: 18%;
        -o-max-width: 18%;
    }
}
@media screen and (max-width: 767px) {
    /* 2021-11-09 新增英文字 -shawn */
    .padding_left_30{
        padding:0 0 0 30px;
    }
    #live-join button.btn-submit .hidden_br {
        display:initial;
    }
}

#live-content .video div {
    padding: unset;
}

#live-content .video .video-js {
    margin: 0 auto;
}

#live-content .video .vjs-volume-level:before {
    top: -.5em;
}

@media screen and (max-width: 1024px) {
    #live-content .video .vjs-volume-level:before {
        top: -.3em;
    }
}