.video-rank {
    .video-type-nav {
        overflow: visible;
    }
    .video-type-list {
        @include webkitbox();
        height: px2rem(80);
        background-color: #f7f7f7;
        line-height: px2rem(80);
        .video-type__item.swiper-slide {
            position: relative;
            width: px2rem(100) !important;
            color: #333333;
            font-size: $baseFontSize;
            text-align: center;
            border: $baseBorder;
            border-width: 1px 1px 1px 0;
            &.active {
                color: #fff;
                background-color: $highLightColor;
                border: none;
            }
            &.active:not(:first-child):after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 0;
                height: 0;
                border-width: px2rem(12) px2rem(18);
                border-style: solid;
                border-color: transparent transparent #fff transparent;
                transform: translate(-50%, 0)
            }
        }
    }
    .video-list-container {
        .video-list-wrap {
            overflow: hidden;
            display: none;
            &.active {
                display: block;
            }
        }
    }
    .video-list__item {
        margin: 0 px2rem(25);
        a {
            @include webkitbox();
            -webkit-box-align: center;
            padding: px2rem(30) 0;
            border-bottom: $baseBorder;
        }
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
            .rank-index {
                background-color: $highLightColor;
            }
        }
        .rank-index {
            display: block;
            width: px2rem(40);
            height: px2rem(40);
            margin-right: px2rem(30);
            font-size: 12px;
            line-height: px2rem(40);
            color: #fff;
            text-align: center;
            background-color: #999999;
        }
        .news-cover {
            display: block;
            width: px2rem(223);
            height: px2rem(124);
        }
        .video-info {
            width: px2rem(380);
            margin-left: px2rem(20);
        }
        .video-title {
            font-size: px2rem(32);
            line-height: 1.3;
        }
        .user-info {
            @include webkitbox();
            -webkit-box-align: center;
        }
        .img-wrap {
            display: block;
            width: px2rem(40);
            height: px2rem(40);
            border-radius: 50%;
            margin-right: px2rem(20);
            overflow: hidden;
        }
        .user-icon {
            display: block;
            width: 100%;
            height: 100%;
        }
        .user-name {
            font-size: 12px;
            color: $lightFontColor;
        }
    }
    .child-videotype-nav {
        border-bottom: $baseBorder;
    }
    .child-videotype-list {
        @include webkitbox();
        height: px2rem(80);
        padding: 0 px2rem(25);
        line-height: px2rem(80);
        .video-type__item {
            width: auto !important;
            padding: 0 px2rem(5);
            margin-right: px2rem(30);
            font-size: $baseFontSize;
            &.active {
                color: $highLightColor;
                border-bottom: 2px solid $highLightColor;
            }
        }
    }
}