/*---------slideshow--------------------*/
.slideShow {
    width: 690px;
    height: 387px; /*其实就是图片的高度*/
    margin: 0px auto;
    position: relative;
    overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}

    .slideShow ul {
        list-style: none;
        width: 20000px;
        position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
    }

        .slideShow ul li {
            float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
            width: 690px;
            position: relative;
            z-index: 99;
        }
        .slideShow ul li .title {
            position:absolute;
            bottom:12px;
            left:10px;
            width:98%;
            color:#fff;
            z-index:99999;
            font-size:16px;
            font-family:微软雅黑;
        }

    .slideShow .tbg {
        bottom: 0px;
        position: absolute;
        height: 45px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .slideShow ul li img {
        width: 100%;
        height: 387px;
    }

    .slideShow .showNav { /*用绝对定位给数字按钮进行布局*/
        position: absolute;
        right: 10px;
        bottom: 15px;
        text-align: center;
        font-size: 12px;
        line-height: 20px;
        z-index: 9999;
    }

        .slideShow .showNav span {
            cursor: pointer;
            display: block;
            float: left;
            width: 12px;
            height: 12px;
            background: #ccc;
            margin-left: 5px;
            color: #fff;
            border-radius: 20px;
            font-size: 1px;
        }

        .slideShow .showNav .active {
            background: #009675;
        }
/*---------slideshow end--------------------*/