* {box-sizing: border-box;}

a {
    color: inherit;
    text-decoration: none;
}

body{
    margin: 0;
    padding: 0;
}

.header {
    position: fixed;
    left: 0; top: 0; width:100%;
    display: flex; flex-direction: row; justify-content: space-between; minHeight:48px;
    padding:8px 12px;font-weight:400;font-size:0.875rem;line-height:1.5;background:hsl(220, 35%, 97%);
}

.header>div {
    padding: 8px;
}

.header a {
    min-width: 64px;
    color: black;
    text-align: center;
    padding: 8px 12px 8px 12px;
}

.header a:hover {
    background-color: #ddd;
    color: black;
}

.header a.active {
    background-color: dodgerblue;
    color: white;
}

.container {
    display: flex; margin: 30px auto; width: 95vw;
}

.contentLeft {
    flex: 1; vertical-align: top
}

.contentRight {
    width: 350px; marginLeft: 24px;
    padding-top: 14px;
}

.recommend {
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 12px;
}

.recommendItem {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 12px;
    cursor: pointer;
}

.recommendItemCover {
    width: 141px;
    height: 80px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 10px;
}

.recommendItemTexts {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: space-between;

}
.recommendItemImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommendItemTitle {
    display: -webkit-box;
    margin-bottom: 8px;
    width: 100%;
    height: 36px;
    color: #18191C;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    white-space: normal;
    word-wrap: break-word;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color .3s ease;
    cursor: pointer;
}

.recommendItemSubWrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.recommendItemShowTag {
    color: #9499a0;
    font-size: 12px;
    margin-bottom: 4px;
    height: 15px;
}

.recommendItemShowStar {
    display: flex;
    align-items: center;
    color: #9499a0;
    font-size: 12px;
}

.recommendItemShowStar svg {
    margin-right: 2px;
    margin-bottom: -.5px;
    margin-top: -1px;
    width: 18px;
    height: 18px;
}

.video {
    width: calc(95vw - 375px);
    height: calc((95vw - 375px) * 270/480);
}
.mediaInfo {
    padding: 20px 0 10px;
}
.mediaTitle {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    margin-bottom: 10px;
    padding-right: 240px;
    transition: color .3s ease;
}

.mediaStar {
    height: 18px;
    line-height: 18px;
    font-size: 14px;
    color: #61666D;;
    margin-bottom: 6px;
}

.mediaTag {
    height: 18px;
    line-height: 18px;
    font-size: 14px;
    color: #61666D;;
    margin-bottom: 6px;
}

.containerIndex {
    margin: 68px auto 0 auto;
    width: 61vw;
}

.videoIndex {
    width: 61vw;
    height: calc(61vw * 270/480);
}