@charset "utf-8";



/* 开始 */
.vid-bar{
            width: 1220px;
            margin: auto;
            overflow: hidden;
            margin-top:10px;
            
        }
.vid-bar-left{
            float: left;
            overflow: hidden;
            position: relative;
        }
.vid-bar-right{
            
            overflow: hidden;
        }
.vid-bar-nav{
            height:40px;
            width:456px;
            padding: 0px 20px;
            position:absolute;
            left: 1px;
            top: 0px;
            /*background:#000;
            filter:alpha(opacity=60);
            opacity:0.6; */
            z-index: 10;
            line-height: 40px;
            color: #fff;

        }
.vid-bar-nav a{
            float: right;
            font-size: 13px;
            color: #fff;
            font-weight: 600;

        }
.bfimg{
    position: absolute;
    top:185px;
    left: ;
    z-index:3;
    left: 210.5px;
    opacity:.9;
    filter:alpha(opacity=90);
}
.vid-bar-nav p{
            font-size: 16px;
            font-weight: 600;
            float: left;
            color:#fff;

        }
        .vid-bar-nav-mask{
            width:496px;
            height:40px;
            position:absolute;
            left:1px;top:0px;
            z-index:9;
            background:#000;
            opacity:.6;
        }
.vid-mask{
    width:100%;
    height: 100%;
    background: #000;
    position:absolute;
    left:0px;
    top: 0px;
    z-index: 1;
    opacity: .2;
    cursor: pointer;
    display: block;
    filter:alpha(opacity=20)
}    
        /* 图片轮播 */
.slideBox{ width:496px; height:442px; overflow:hidden; position:relative; border:1px solid #ddd;}
.slideBox .hd{ height:auto; overflow:hidden; position:absolute; bottom:25px; z-index:10;width:auto;width: 100% }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
.slideBox .hd ul li{ float:left; margin-left:10px; width:10px; height:10px; line-height:14px; text-align:center; background:#fff; cursor:pointer;border-radius: 50%;}
.slideBox .hd ul li.on{ background:#f00;color:#fff; }
.slideBox .hd p{width: 100%; text-align: center;font-size: 16px;font-weight: 600;color: #fff;margin-bottom: 10px;}
.slideBox .bd{ position:relative; height:100%; z-index:0; }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:496px; height:442px;display:block;}

        /* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev,
.slideBox .next{ position:absolute; left:0; top:50%; margin-top:-26px; display:block; width:30px; height:42px; background:#000; filter:alpha(opacity=60);opacity:0.6; color: #fff;font-size: 30px;text-align: center;line-height: 42px;z-index: 10}
.slideBox .next{ left:auto; right:0; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{color: red;}
.slideBox .prevStop{ display:none;}
.slideBox .nextStop{ display:none;}


.img-mask{
            width: 100%;
            height: 37px;
            background: black;
            position: absolute;
            left: 0px;
            top: 73px;
            opacity: .7;
            font-size: 13px;
            color: #fff;
            background-image: url(../images/ys5.png);


        }
        .img-mask-text{
            width:82px;
            padding:5px;
            border-bottom: 2px solid #fbede2;
            text-align: center;
            margin:auto;
            height: 16px;
            color:#fff;
            padding-bottom:8px;
        }
        .niuqiqi-content li:nth-child(2n) .img-mask{
            background-image: url(../images/ys2.png);
        }
        .niuqiqi-content li:nth-child(3n) .img-mask{
            background-image: url(../images/ys3.png);
        }
        .niuqiqi-content li:nth-child(3n+1) .img-mask{
            background-image: url(../images/ys4.png);
        }
        
        /*.niuqiqi-content li:nth-child(5n+1) .img-mask{
            background-image: url(img/ys6.png);
        }*/
        .niuqiqi-content li:nth-child(6n+1) .img-mask{
            background-image: url(../images/ys1.png);

        }
        .niuqiqi-content li:nth-child(6n) .img-mask{
            background-image: url(../images/ys6.png);

        }


/*一、24格处理*/
#iconWall{
    width: 726px;
    background-color: #f0f0f0;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 1px;
    padding-left: 1px;
    list-style: none;
}

#iconWall li{
    width: 120px;
    height: 110px;
    /*background-color: #fff;*/
    float: left;
    margin-right: 1px;
    margin-bottom: 1px;
    position: relative;
    overflow: hidden;

}

/*二、3D反转区域处理 */
.img-back, .img-front{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    width: 120px;
    height: 110px;
    text-align: center;
    line-height: 108px;
}

.vid-bar-right li img{
    vertical-align: middle;
}


.img-3d{
    transform-style: preserve-3d;
}

.img-back{
    transform: rotateY(180deg);
}


/*三、换一批*/
#btnRefresh{
    text-align: center;
    transition: .3s linear;
    background-color: #fff;
}
.iconRefresh{
    width: 28px;
    height: 28px;
    background: url("../images/re1.png") no-repeat;
    margin: 32px auto 0;
}
#btnRefresh:hover{
    color: #fff;
    background-color: #ccc;
    transition: 0s;
    cursor: pointer;

}
#btnRefresh:hover span{
    color: white;
}
#btnRefresh:hover .iconRefresh{
    background: url("../images/refresh-white.png");
}


/*四、处理浮层*/
.mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 110px;
    background-color: rgba(255, 255, 255, .5);
    opacity: 0;
    display: block;
}
.vid-bar-right li:hover .mask{
    opacity: 1;
    transition: .3s linear;
}