/********************************************
 *
 * 文件注释，说明文件名称和文件所包含内容
 * @file autoFocus.less
 * @author shangwenhe
 * @create time 2015年06月02日12:22
 * @version {版本信息}  v0.0.1
 *
 * ////////////////////////////////////////
 *
 * @require
 * @describe  描述文件
 * @Modification time
 *
************************************************/

.wide-carousel-wrap {
    height: 382px;
    width: 100%;
    overflow: hidden;
    position: relative;
    min-width: 1000px;
    .wideCarousel {
        width: 1235px;
        position: relative;
        margin: 0 auto;
        zoom: 1;
        background-color: #706d63;
        /* IE6 下超出隐藏，
		 * 但由于它具有position属性，
		 * 它是不会隐藏的
		 * 但已经可以居中展示了
		 * */
        _overflow: hidden;
        #wideCarouselList {
            background-color: #706d63;
            position: relative;
            left: 0;
            margin-left: -1235px;
            height: 358px;
            width: 3705px;
            overflow: hidden;
            &.wide-carousel-2 {
                margin-left: 0;
            }
            .video a:hover img {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }
            .carousel-item {
                float: left;
                width: 1235px;
                .block-wall-item {
                    float: left;
                    margin: 0;
                    overflow: hidden;
                    a:hover .play-video-icon {
                        margin-top: -30px;
                        height: 61px;
                        width: 61px;
                        margin-left: -30px;
                        background: url(http://vs6.bdstatic.com/browse_static/v3/index/widget/video/movie/play_normal_big_c987203.png) center center no-repeat scroll;
                        _background: 0;
                        _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://vs6.bdstatic.com/browse_static/v3/index/widget/video/movie/play_normal_big_c987203.png');
                    }
                    img {
                        width: 100%;
                        height: 100%;
                    }
                    .vid-info {
                        bottom: 5px;
                    }
                    .vid-update {
                        position: absolute;
                        color: #ccc;
                        font-size: 12px;
                        line-height: 22px;
                        height: 22px;
                        width: 94%;
                        padding: 0 3%;
                        text-align: right;
                        bottom: 5px;
                        left: 0;
                    }
                    .gradient-bg {
                        height: 105px;
                        _height: 175px;
                    }
                }
                @warll-border: 1px solid #6c6c6c;
                .item-0 {
                    float: left;
                    width: 281px;
                    height: 359px;
                }
                .item-1 {
                    float: right;
                    width: 280px;
                    height: 359px;
                    border-left: @warll-border;
                }
                .item-2 {
                    float: right;
                    width: 437px;
                    height: 199px;
                    border-left: @warll-border;
                }
                .item-3 {
                    float: left;
                    width: 234px;
                    height: 164px;
                    border-left: @warll-border;
                }
                .item-4 {
                    float: left;
                    width: 234px;
                    height: 194px;
                    border-left: @warll-border;
                    border-top: @warll-border;
                }
                .item-5 {
                    float: right;
                    width: 218px;
                    height: 159px;
                    border-left: @warll-border;
                    border-top: @warll-border;
                }
                .item-6 {
                    float: right;
                    width: 218px;
                    height: 159px;
                    border-left: @warll-border;
                    border-top: @warll-border;
                }
            }
        }
        .ctrl-mask {
            filter: alpha(opacity=90);
            -moz-opacity: .9;
            -khtml-opacity: .9;
            opacity: .9;
            position: absolute;
            background-color: #0c0c0b;
            _background-color: none;
            width: 500px;
            top: 0;
            height: 358px;
            z-index: 10;
            overflow: hidden;
            .ctrl {
                background: #666 url("./wideCar.png") no-repeat 0 center;
                width: 49px;
                height: 70px;
                position: absolute;
                top: 128px;
                cursor: pointer;
                display: block;
                border-radius: 3px;
                font: 800 60px/76px SimSun, "宋体", Arial;
                text-align: center;
                color: #ccc;
                overflow: hidden;
                text-indent: 100em;
                _text-indent: 0;
                _background: none;
                &:hover {
                    background-color: #3083fd;
                    color: #fafafa;
                }
            }
        }
        div {
            &.ctrl-mask-left {
                left: -500px;
                _left: -500px + 49px;
                .ctrl {
                    background-position: 13px center;
                    right: -3px;
                }
            }
            &.ctrl-mask-right {
                right: -500px;
                _right: -500px + 49px;
                .ctrl {
                    background-position: -32px center;
                    left: -3px;
                }
            }
        }
    }
    .carousel-dotted {
        width: 100%;
        margin-top: 10px;
        position: absolute;
        .carousel-dotted-list {
            width: (18px + 2 * 3px + 1px) * 4;
            margin: 0 auto;
            .dotted-item {
                width: 18px;
                height: 3px;
                float: left;
                margin: 0 3px;
                background-color: #999;
                overflow: hidden;
            }
            .dotted-selected {
                background-color: #f26522;
            }
        }
    }
}
.w1024 {
    .wide-carousel-wrap {
        .wideCarousel {
            width: 1000px;
            #wideCarouselList {
                margin-left: -1000px;
                width: 3000px;
                &.wide-carousel-2 {
                    margin-left: 0;
                }
                .carousel-item {
                    width: 1000px;
                    .item-3, 
                    .item-4 {
                        display: none;
                        height: 0;
                        width: 0;
                    }
                    .item-6 {
                        _width: 212px;
                        img {
                            _width: 212px;
                        }
                    }
                }
            }
            .ctrl-mask {
                width: 47px;
                height: 76px;
                top: 128px;
                background: none;
                .ctrl {
                    top: 0;
                }
            }
            div {
                &.ctrl-mask-left {
                    left: 0;
                    .ctrl {
                        right: 3px;
                    }
                }
                &.ctrl-mask-right {
                    right: 0;
                    .ctrl {
                        left: 3px;
                    }
                }
            }
        }
    }
}
/********************************************
  * 
  * @author shangwenhe
  * @create time 2014年12月09日 10:21 
  *
  * ////////////////////////////////////////
  *
  * @describe  w1280 在mac下的样式修整
  * 
************************************************/

.w1280 {
    .wide-carousel-wrap {
        .wideCarousel {
            .ctrl-mask {
                overflow: visible;
                filter: none;
            }
            div {
                &.ctrl-mask-left {
                    .ctrl {
                        right: -49px;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                    }
                }
                &.ctrl-mask-right {
                    .ctrl {
                        left: -49px;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                    }
                }
            }
        }
    }
}