.clearFix:after {
    content: '';
    width: 100%;
    height: 0;
    display: block;
    clear: both;
}

#media-page {
    padding: 50px 0;
}

.norm-width {
    width: 1250px;
    margin: auto;
}


/* 媒體狀態 (直播中/直播預告/重播) */

.media-status-live,
.media-status-vod,
.media-status-soon {
    color: #FFFFFF;
    float: left;
    position: relative;
}

.media-status-live {
    background-color: #D20000;
}

.media-status-vod {
    background-color: #FF6000;
}

.media-status-soon {
    background-color: #959595;
}

.media-status-live::after,
.media-status-vod::after,
.media-status-soon::after {
    margin-left: 5px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-45%);
    -moz-transform: translateY(-45%);
    -ms-transform: translateY(-45%);
    transform: translateY(-45%);
}

.media-status-live::after {
    content: url(../../images/home/live-decoration-icon.png);
}

.media-status-vod::after {
    content: url(../../images/home/vod-decoration-icon.png);
}

.media-status-soon::after {
    content: url(../../images/home/soon-decoration-icon.png);
}


/* 媒體類型 */

.media-type {
    border: 1px solid #1C1C1C;
    float: left;
}


/* 媒體開播時間 */

.media-start-date {
    float: right;
}


/*** 左側媒體區塊 ***/

#media-renderer {
    width: 24%;
    margin-right: 36px;
    float: left;
}


/*** 左側-媒體推薦 ***/

#media-recommend {
    width: 100%;
    font-weight: bold;
    box-sizing: border-box;
}

#media-recommend h3 {
    height: 33px;
    border-bottom: 2px solid #FF6000;
    font-size: 16px;
    line-height: 33px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    position: relative;
}

#media-recommend h3::before {
    content: url(../../images/media/recommend-section-title.png);
    width: 33px;
    height: 33px;
    vertical-align: bottom;
    margin-right: 8px;
    display: inline-block;
}

.media-thumbnail {
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px;
    -webkit-transition: all .3s;
    /* Safari */
    transition: all .3s;
}

.media-thumbnail:hover {
    border: 1px solid #FF6000;
}

.media-thumbnail:hover .media-link::before {
    opacity: 1;
    visibility: visible;
}

.media-thumbnail .media-group {
    width: 100%;
}

.media-thumbnail .media-group:last-child {
    margin-top: 8px;
}

.media-thumbnail .media-cover {
    width: 120px;
    height: 68px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #DFDFDF;
    box-sizing: border-box;
    margin-right: 8px;
    position: relative;
    float: left;
}

.media-thumbnail .media-link::before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 96, 0, 0.5);
    background-image: url(../../images/media/play-icon.png);
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    display: block;
    -webkit-transition: all .3s;
    /* Safari */
    transition: all .3s;
}

.media-thumbnail .media-info {
    width: calc(100% - 128px);
    height: 68px;
    float: left;
}

.media-thumbnail .media-name {
    height: 38px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.media-thumbnail .media-supplier {
    width: 100%;
    color: #FF6000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-thumbnail .media-supplier a {
    color: #FF6000;
    text-decoration: none;
}

.media-thumbnail .media-status-live,
.media-thumbnail .media-status-vod,
.media-thumbnail .media-status-soon {
    border-radius: 11px;
    font-size: 12px;
    line-height: 1;
    padding: 5px 10px;
}

.media-thumbnail .media-status-live {
    padding-right: 25px;
}

.media-thumbnail .media-status-vod,
.media-thumbnail .media-status-soon {
    padding-right: 30px;
}

.media-thumbnail .media-type {
    font-size: 12px;
    margin: 0 5px;
    padding: 2px 8px;
}

.media-thumbnail .media-view-count {
    font-size: 12px;
    float: left;
}

.media-thumbnail .media-view-count::before {
    content: url(../../images/media/media-view-icon-small.png);
    vertical-align: middle;
}


/*** 媒體內容 ***/

#media-content {
    width: calc(76% - 36px);
    float: left;
    position: relative;
}

body::-webkit-scrollbar {
    display: none;
}

#videoBlock #loading-image {
    display: none;
    width: 200px;
    height: 200px;
    position: fixed;
    left: calc(50% + 100px);
    top: calc(50% + 100px);
    border-radius: 5px;
    z-index: 300;
    background-image: url(../../images/header/loading-image.gif);
}


/*** 媒體屏幕 ***/

#live-section {
    width: 100%;
    height: auto;
    position: relative;
}

#player_div {
    width: 100%;
    height: 100%;
    min-height: 480px;
}


/*** 倒數計時區塊 ***/

#comesoon-container {
    width: 100%;
    height: 525px;
    background-color: #A3A3A3;
    top: 0;
    left: 0;
    z-index: 5;
}

#comesoon-timer {
    width: 100%;
    height: 525px;
    background-color: #1C1C1C;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
}

#comesoon-timer p {
    width: 60%;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 37px;
    color: #FFFFFF;
    font-size: 20px;
    padding: 10px 0;
    position: absolute;
    bottom: 10%;
    left: 50%;
    -ms-transform: translate(-50%);
    /* IE 9 */
    -webkit-transform: translate(-50%);
    /* Safari */
    transform: translate(-50%);
}


/*** 本檔直播商品 slide ***/

.live-pds-section {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

.live-pds-title {
    width: 36px;
    color: #FFFFFF;
    background-color: #FF6000;
    box-sizing: border-box;
    padding: 10px;
}

.live-pds-slide-section {
    width: calc(100% - 22px);
    padding: 10px;
    display: flex;
    align-items: center;
}

.live-pds-slide-btn {
    width: 14.28px;
    height: 25px;
    background: transparent;
    background-image: url(../../images/media/media-pds-slide-btn.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    margin: 0 5px;
    cursor: pointer;
    outline: none;
}

#live-pds-slide-next {
    transform: rotate(180deg);
}

.live-pds-slide {
    width: calc(100% - ((14.28px + 10px) * 2));
    height: 85px;
    margin: 0 10px;
    overflow: hidden;
    position: relative;
}

.live-pds-slide ul {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    -webkit-transition: all .75s ease-in-out;
    /* Safari */
    transition: all .75s ease-in-out;
}

.live-pds-item {
    width: 240px;
    margin-right: 10px;
}

.live-pds-item a {
    text-decoration: none;
    display: flex;
}

.live-pds-item-cover {
    width: 85px;
    height: 85px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    margin-right: 10px;
}

.live-pds-item-info {
    width: calc(100% - 95px);
    text-align: left;
    padding: 8.5px 0;
}

.live-pds-item-name {
    height: 42px;
    color: #FFFFFF;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.live-pds-item-price {
    color: #FF5D5F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
}


/*** 媒體資訊 ***/

.live-info-top .media-mark {
    font-weight: bold;
    padding: 15px 0 10px 87px;
}

.live-info-top .media-mark .media-status-live,
.live-info-top .media-mark .media-status-vod,
.live-info-top .media-mark .media-status-soon {
    line-height: 1;
    border-radius: 12px;
    padding: 5px 15px;
}

.live-info-top .media-mark .media-status-live {
    padding-right: 30px;
}

.live-info-top .media-mark .media-status-vod {
    padding-right: 32px;
}

.live-info-top .media-mark .media-status-soon {
    padding-right: 30px;
}

.live-info-top .media-mark .media-type {
    margin: 0 10px;
    padding: 1.5px 10px;
}

.live-info-top .owner-section .owner-avatar {
    width: 77px;
    height: 77px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #DFDFDF;
    border-radius: 50%;
    box-sizing: border-box;
    margin-right: 10px;
    float: left;
}

.live-info-top .owner-section .basic-info {
    width: calc(100% - 87px);
    float: left;
}

.live-info-top .owner-section .live-title {
    font-size: 22px;
    font-weight: bold;
}

.live-info-top .owner-section .owner-name {
    line-height: 1;
    padding: 5px 0;
}

.live-info-top .owner-section .owner-name .owner-link {
    color: #ff6000;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    margin: 10px 0;
    float: left;
}

.store-follow-btn {
    border-radius: 20px;
    background-color: #FF6000;
    border: none;
    color: #FFFFFF;
    font-family: 'Microsoft JhengHei', Helvetica;
    margin: 5px 15px;
    padding: 10px 20px;
    cursor: pointer;
    outline: none;
}

.store-follow-btn::after {
    content: '';
    width: 15px;
    height: 14px;
    background-image: url(../../images/media/media-follow-store-icon.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 5px;
    margin-top: 1px;
    display: block;
    float: right;
}

.live-info-top .media-view-count {
    margin: 6px;
    float: right;
}

.live-info-top .media-view-count::before {
    content: url(../../images/media/media-view-icon.png);
    vertical-align: middle;
    margin-right: 5px;
}

.live-info-top .live-ctrl-btns {
    float: right;
    font-size: 0;
}

.live-info-top .live-ctrl-btns a {
    text-decoration: none;
    display: inline-block;
}

.live-info-top .live-ctrl-btns button {
    width: 34px;
    height: 34px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 50%;
    vertical-align: bottom;
    margin-left: 5px;
    cursor: pointer;
    outline: none;
}

#do-fav-btn {
    background-image: url(../../images/media/un-favorite-icon.png);
}

#cancel-fav-btn {
    background-image: url(../../images/media/favorite-icon.png);
}

#twitter-btn {
    background-image: url(../../images/media/Twitter-icon.png);
}

#facebook-btn {
    background-image: url(../../images/media/Facebook-icon.png);
}

#line-btn {
    background-image: url(../../images/media/LINE-icon.png);
}

#embed-btn {
    background-image: url(../../images/media/embed-code-icon.png);
}

#report-btn {
    background-image: url(../../images/media/Report-icon.png);
}

#embed-section {
    width: 100%;
    padding-top: 10px;
    float: left;
    display: none;
}

#embed-section input {
    width: 100%;
    background-color: #E3E3E3;
    border: none;
    font-size: 16px;
    font-weight: bold;
    font-family: monospace;
    box-sizing: border-box;
    padding: 5px;
    display: block;
}

.live-info-bottom p {
    font-size: 14px;
    padding-left: 87px;
    line-height: 1.6;
}


/*** 檢舉媒體跳窗 ***/

#reportPage {
    width: 100%;
    height: 100%;
    min-width: 340px;
    min-height: 276px;
    background: rgba(0, 0, 0, 0.75);
    vertical-align: middle;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    display: none;
}

#reportBox {
    width: 600px;
    background-color: white;
    font-family: Microsoft JhengHei, Helvetica;
    margin: auto;
    margin-top: 80px;
    padding: 0;
    position: relative;
}

.closeReportBoxBtn {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.reportContent {
    text-align: center;
    padding: 20px;
}

#reportMainTitle {
    color: #5E5E5E;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    display: block;
}

#remind {
    border-bottom: 1px solid #E3E3E3;
    font-size: 14px;
    text-align: left;
    padding: 10px 0;
}

#remind span {
    color: #D14B4B;
    font-weight: bold;
    padding: 10px 0;
    display: block;
}

#remind ol li p:nth-child(1) {
    width: 13px;
    color: #D14B4B;
    display: inline-block;
}

#remind ol li p:nth-child(2) {
    width: 537px;
    color: #D14B4B;
    vertical-align: top;
    display: inline-block;
}

#reportTypeBlock {
    margin: 30px 0 20px 0;
}

.reportType {
    width: 100%;
    height: 30px;
    border: 1px solid #C3C3C3;
    font-family: Microsoft JhengHei, Helvetica;
    padding: 2px;
}

#reportTypeBlock .checkRemind {
    color: #D14B4B;
    font-size: 12px;
    text-align: left;
    margin: 5px;
    display: none;
}

#reportBodyBlock {
    margin: 20px 0 30px 0;
    position: relative;
}

.reportBody {
    width: 100%;
    height: 100px;
    border: 1px solid #C3C3C3;
    font-family: Microsoft JhengHei, Helvetica;
    box-sizing: border-box;
    padding: 5px;
    resize: none;
}

#reportBodyBlock .checkRemind {
    color: #D14B4B;
    font-size: 12px;
    text-align: left;
    position: absolute;
    left: 5px;
    bottom: 0;
    display: none;
}

#wordCount {
    color: #abaeb7;
    font-size: 12px;
    text-align: right;
    display: block;
}

.reportSendBtn,
.reportOverBtn {
    background-color: #FF6000;
    border: none;
    color: #FFFFFF;
    font-family: 'Microsoft JhengHei', Helvetica;
    padding: 6.5px 20px;
    cursor: pointer;
    outline: none;
}

#ReportComplete {
    width: 100%;
    height: 467px;
    display: none;
}

#ReportComplete img {
    margin-top: 80px;
    margin-bottom: 30px;
}

#ReportComplete span {
    color: #5E5E5E;
    font-size: 28px;
    font-weight: bold;
    display: block;
}

#ReportComplete p {
    color: #abaeb7;
    margin: 20px;
}

.reportOverBtn {
    margin-top: 70px;
}


/*** 評論 ***/

.vid-comment-section {
    padding-top: 20px;
    padding-left: 87px;
}

#vid-comment-section .block-title {
    color: #FF6000;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
}

#vid-comment-section .block-title::after {
    content: url(../../images/media/comment-title-decoration.png);
    vertical-align: middle;
    margin-left: 5px;
}

.comment-self,
.comment {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 16px;
}

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

.comment-client {
    width: 100%;
    margin-bottom: 15px;
    float: left;
}

.comment-sellers {
    width: calc(100% - 58px);
    float: right;
}

.comment-photo,
.comment-content {
    float: left;
}

.comment-photo {
    width: 48px;
    height: 48px;
    margin-right: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #DFDFDF;
    border-radius: 50%;
    box-sizing: border-box;
}

.comment-self .comment-content {
    margin: 9px 0;
}

.comment-content {
    width: calc(100% - 58px);
    float: left;
}

.comment-content textarea {
    width: 650px;
    height: 35px;
    border-radius: 30px;
    border: 1px solid #9b9b9b;
    font-family: 'Microsoft JhengHei', 'Helvetica', 'Roboto', serif;
    box-sizing: border-box;
    padding: 8px 20px;
    float: left;
    outline: none;
    resize: none;
}

.comment-content button {
    width: 100px;
    height: 35px;
    border-radius: 60px;
    padding: 5.5px 10px;
    font-size: 14px;
    font-weight: bold;
    background-color: #FF6000;
    border: none;
    color: #FFFFFF;
    font-family: 'Microsoft JhengHei', 'Helvetica', 'Roboto', serif;
    margin-left: 10px;
    float: right;
    cursor: pointer;
    outline: none;
}

.comment-info {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5px 0;
}

.comment-info span:nth-child(1) {
    color: #FF6000;
    font-weight: bold;
    text-decoration: none;
    float: left;
}

.comment-info span:nth-child(2) {
    color: #B2B2B2;
    font-size: 13px;
    float: right;
}

.comment-text {
    width: 100%;
    box-sizing: border-box;
}

.comment-text p {
    font-size: 14px;
    word-break: break-all;
    padding: 2.5px 0;
}

#no-comment {
    width: 100%;
    color: #5F5F5F;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
}

#vid #videoBlock {
    width: 100%;
    height: 2000px;
    position: absolute;
    top: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 300;
    display: none;
}

#vid div[id^=my-video] {
    position: absolute;
    bottom: 62px;
    right: 91px;
    z-index: 100;
    transition: all 0.6s;
}

#vid div[id^=my-video] video {
    width: 100%;
}

@media screen and (max-width: 464px) {
    #live-section {
        width: 100%;
        height: 270px;
    }
    #comesoon-container {
        width: 100%;
        height: 270px;
    }
}