.mediaView {
    position: relative;
    width: 100%;
    height: 100%;
}

.mediaView .mediaNav {
    position: absolute;
    width: 100%;
    height: 100%;
}

.mediaView .mediaNav li {
    position: relative;
    float: left;
    width: 100%;
    height: calc(25% - 16px);
}

.mediaView .mediaNav li a {
    width: 100%;
    height: 100%;
}

.mediaView .mediaNav li a .black-rect {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.66);
}

.mediaView .mediaNav li a:hover .black-rect,
.mediaView .mediaNav li a.active .black-rect {
    background-color: rgba(0, 0, 0, 0.1);
}

.mediaView .mediaNav li a .icon {
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.mediaView .mediaNav li a .icon img {
    display: inline-block;
    margin-bottom: 10px;
}

.mediaView .mediaNav li a .icon p {
    font-size: 30px;
}

.mediaView .mediaNav li a .bg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.mediaView .mediaNav li:nth-child(1) a .bg {
    background: url("../resource/media/btn-bg-1-m.jpg") no-repeat center;
    background-size: cover;
}

.mediaView .mediaNav li:nth-child(2) a .bg {
    background: url("../resource/media/btn-bg-2-m.jpg") no-repeat center;
    background-size: cover;
}

.mediaView .mediaNav li:nth-child(3) a .bg {
    background: url("../resource/media/btn-bg-3-m.jpg") no-repeat center;
    background-size: cover;
}

.mediaView .mediaNav li:nth-child(4) a .bg {
    background: url("../resource/media/btn-bg-4-m.jpg") no-repeat center;
    background-size: cover;
}

.mediaView #player {
    position: absolute;
    width: 100%;
    height: calc(100% - 64px);
    background-color: black;
    display: none;
    opacity: 0;
}