@charset "UTF-8";

.nav-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-bar li {
    font-size: 16px;
    color: #999;
    margin: 0 5px;
}

.nav-bar li.active {
    color: #333;
    position: relative;
    font-size: 22px;
}

.nav-bar li.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 4px;
    background: url('../images/index/border-bottom.png') no-repeat;
    background-size: 100% 100%;
}

.video-main {
    padding: 45px 0 60px 0px;
}

.month-number li {
    width: 100%;
    height: auto;
    background: url('../images/index/video_bg1.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    padding: 20px;
}

.month-number li .top {
    display: flex;
    justify-content: space-between;
}

.month-left {
    display: flex;
    align-items: center;
}

.numbers {
    width: 47px;
    height: 22px;
    
}

.num-1{
    background: url('../images/index/top1.png') no-repeat;
    background-size: 100% 100%;
}

.num-2{
    background: url('../images/index/top2.png') no-repeat;
    background-size: 100% 100%;
}

.num-3{
    background: url('../images/index/top3.png') no-repeat;
    background-size: 100% 100%;
}

.icon-num{
    width: 42px;
    height: 16px;
}

.icon-num-4{
    background:url('../images/index/rank-4.png') no-repeat;
    background-size: 100% 100%;
}

.icon-num-5{
    background:url('../images/index/rank-5.png') no-repeat;
    background-size: 100% 100%;
}

.icon-num-6{
    background:url('../images/index/rank-6.png') no-repeat;
    background-size: 100% 100%;
}

.icon-num-7{
    background:url('../images/index/rank-7.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-8{
    background:url('../images/index/rank-8.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-9{
    background:url('../images/index/rank-9.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-10{
    background:url('../images/index/rank-10.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-11{
    background:url('../images/index/rank-11.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-12{
    background:url('../images/index/rank-12.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-13{
    background:url('../images/index/rank-13.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-14{
    background:url('../images/index/rank-14.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-15{
    background:url('../images/index/rank-15.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-16{
    background:url('../images/index/rank-16.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-17{
    background:url('../images/index/rank-17.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-18{
    background:url('../images/index/rank-18.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-19{
    background:url('../images/index/rank-19.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-20{
    background:url('../images/index/rank-20.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-21{
    background:url('../images/index/rank-21.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-22{
    background:url('../images/index/rank-22.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-23{
    background:url('../images/index/rank-23.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-24{
    background:url('../images/index/rank-24.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-25{
    background:url('../images/index/rank-25.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-26{
    background:url('../images/index/rank-26.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-27{
    background:url('../images/index/rank-27.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-28{
    background:url('../images/index/rank-28.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-29{
    background:url('../images/index/rank-29.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-30{
    background:url('../images/index/rank-30.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-31{
    background:url('../images/index/rank-31.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-32{
    background:url('../images/index/rank-32.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-33{
    background:url('../images/index/rank-33.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-34{
    background:url('../images/index/rank-34.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-35{
    background:url('../images/index/rank-35.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-36{
    background:url('../images/index/rank-36.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-37{
    background:url('../images/index/rank-37.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-38{
    background:url('../images/index/rank-38.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-39{
    background:url('../images/index/rank-39.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-40{
    background:url('../images/index/rank-40.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-41{
    background:url('../images/index/rank-41.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-42{
    background:url('../images/index/rank-42.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-43{
    background:url('../images/index/rank-43.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-44{
    background:url('../images/index/rank-44.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-45{
    background:url('../images/index/rank-45.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-46{
    background:url('../images/index/rank-46.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-47{
    background:url('../images/index/rank-47.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-48{
    background:url('../images/index/rank-48.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-49{
    background:url('../images/index/rank-49.png') no-repeat;
    background-size: 100% 100%;
}
.icon-num-50{
    background:url('../images/index/rank-50.png') no-repeat;
    background-size: 100% 100%;
}

.video-type {
    height: 20px;
    background: linear-gradient(139.74deg, rgba(176, 138, 255, 0.8) 51.79%, rgba(255, 118, 241, 0.392) 92.47%);
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    line-height: 20px;
    position: relative;
    margin-left: 8px;
    padding: 0 10px 0 18px;
}

.icon-video {
    width: 10px;
    height: 10px;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -5px;
}

.icon-rq{
    background: url('../images/index/icon-video6.png') no-repeat;
    background-size: 100% 100%;
}

.icon-om{
    background: url('../images/index/icon-video3.png') no-repeat;
    background-size: 100% 100%;
}

.icon-gc{
    background: url('../images/index/icon-video4.png') no-repeat;
    background-size: 100% 100%;
}

.icon-dm{
    background: url('../images/index/icon-video5.png') no-repeat;
    background-size: 100% 100%;
}

.icon-ml{
    background: url('../images/index/icon-video7.png') no-repeat;
    background-size: 100% 100%;
}

.icon-av{
    background: url('../images/index/icon-video2.png') no-repeat;
    background-size: 100% 100%;
}

.icon-bh{
    background: url('../images/index/icon-bh.png') no-repeat;
    background-size: 100% 100%;
}

.icon-zm{
    background: url('../images/index/icon-zm.png') no-repeat;
    background-size: 100% 100%;
}

.icon-sn{
    background: url('../images/index/icon-video1.png') no-repeat;
    background-size: 100% 100%;
}

.icon-zf{
    background: url('../images/index/icon-zf.png') no-repeat;
    background-size: 100% 100%;
}

.icon-sm{
    background: url('../images/index/icon-tj.png') no-repeat;
    background-size: 100% 100%;
}

.icon-jd{
    background: url('../images/index/icon-omjd.png') no-repeat;
    background-size: 100% 100%;
}

.icon-sf{
    background: url('../images/index/icon-sf.png') no-repeat;
    background-size: 100% 100%;
}

.icon-jp{
    background: url('../images/index/icon-jp.png') no-repeat;
    background-size: 100% 100%;
}

.video-type2 {
    background: linear-gradient(139.74deg, rgba(153, 130, 248, 0.8) 42.33%, rgba(118, 222, 255, 0.392) 92.47%);
}

.month-right {
    display: flex;
    align-items: center;
}


.month-right .un-sc {
    display: block;
    width: 14px;
    height: 14px;
    background: url('../images/index/icon-sc.png') no-repeat;
    background-size: 100% 100%;
}

.month-right.active .un-sc {
    display: block;
    width: 14px;
    height: 14px;
    background: url('../images/index/icon-isc.png') no-repeat;
    background-size: 100% 100%;
}

.month-right span {
    font-size: 12px;
    color: #666;
    padding-left: 3px;
}

.video-title {
    color: #333;
    font-size: 14px;
    margin: 13px 0px 15px 0px;
    line-height: 20px;
}

.img-box {
    width: 100%;
    height: 181px;
    position: relative;
}

.img-box img{
    display: block;
    width: 100%;
    height: 182px;
    border-radius: 5px;
}

.icon-play {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;

    background: #0E0E0E;
    opacity: 0.8;
    border-radius: 50%;
}

.icon-play::after {
    content: "";
    width: 21px;
    height: 23px;
    background: url('../images/index/icon-play.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -13.5px;
    margin-left: -8.5px;
}

.bottom{
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.b-left,.b-right{
    font-size: 11px;
    color: #666;
    position: relative;
    padding-left: 16px;
}

.b-left::before{
    content: "";
    width: 16px;
    height: 16px;
    background: url('../images/index/icon-hot.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top:0px;
    left:0px;
}

.b-right::before{
    content: "";
    width: 16px;
    height: 16px;
    background: url('../images/index/icon-comment.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top:0px;
    left:-4px;
}

.all-rank li{
    width: 100%;
    height: auto;
    background: url('../images/index/video_bg2.png') no-repeat;
    background-size: 100% 100%;
    padding:7px;
    display: flex;
    margin-top:10px;
}

.rank-number{
    width: 22px;
    height: 22px;
    color: #999;
    font-size: 16px;
    text-align: center;
    line-height: 88px;
}

.rank-number-one{
    background: url('../images/index/rank-number-1.png') no-repeat;
    background-size: 100% 100%;
    margin-top:33px;
}

.rank-number-two{
    background: url('../images/index/rank-number-2.png') no-repeat;
    background-size: 100% 100%;
    margin-top:33px;
}

.rank-number-three{
    background: url('../images/index/rank-number-3.png') no-repeat;
    background-size: 100% 100%;
    margin-top:33px;
}

.all-rank .imgs{
    width: 158px;
    height: 88px;
    margin:0 6px;
}

.all-rank .imgs img{
    display: block;
    width: 158px;
    height: 88px;
    border-radius: 5px;
}

.v-title{
    font-size: 12px;
    color: #333;
    word-wrap:  break-word
}

.video-con{
    position: relative;
    flex: 1;
}

.all-rank .under{
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom:6px;
    width: 100%;
}

.all-rank .under .left,.all-rank .under .right{
    display: flex;
    align-items: center;
}

.under .left{
    margin-right: auto;
    flex: 1;
}

.under .left img{
    width: 16px;
    height: 16px;
}

.under .left span,.under .right span{
    font-size: 11px;
    color: #666;
}

.under .right img{
    width: 13px;
    height: 13px;
}

.video-main ul{
    display: none;
}

.video-main ul.active{
    display: block;
}