﻿
.Cooldog_container {
    width: 900px;
    height: 260px;
    margin: 0;
    position: relative;
    overflow: hidden;
    top: -15px;
}

    .Cooldog_container .Cooldog_content {
        position: absolute;
        width: 780px;
        height: 260px;
        top: 50%;
        left: 50%;
        margin-left: -390px;
        margin-top: -130px;
        z-index: 1;
    }

        .Cooldog_container .Cooldog_content li {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -390px;
            margin-top: -130px;
            width: 780px;
            height: 260px;
            transition: all 0.3s ease;
        }

            .Cooldog_container .Cooldog_content li a {
                display: block;
                width: 100%;
                height: 100%;
            }

            .Cooldog_container .Cooldog_content li img {
                width: 100%;
                height: 100%;
                vertical-align: middle;
                display: inline-block;

            }

    .Cooldog_container .btn_left, .Cooldog_container .btn_right {
        display: none;
        position: absolute;
        top: 50%;
        margin-top: -20px;
        z-index: 50;
        color: #fff;
        cursor: pointer;
        line-height: 40px;
        width: 40px;
        height: 40px;
        text-align: center;
        background: rgba(0,0,0,0.3);
    }

    .Cooldog_container .btn_left {
        left: 0;
    }

    .Cooldog_container .btn_right {
        right: 0;
    }

    .Cooldog_container i {
        font-size: 30px;
    }

    .Cooldog_container .btn_close {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        display: none;
        line-height: 20px;
        text-align: center;
        background-color: #BCB9B9;
        color: #fff;
    }

        .Cooldog_container .btn_close i {
            font-size: 18px;
        }

    .Cooldog_container .buttons {
        width: 370px;
        height: 5px;
        line-height: 5px;
        position: absolute;
        bottom: 5px;
        left: 50%;
        margin-left: -185px;
        z-index: 80;
    }

        .Cooldog_container .buttons a {
            float: left;
            width: 40px;
            height: 5px;
            background-color: #898F94;
            margin-right: 15px;
        }

            .Cooldog_container .buttons a.color {
                background-color: #92ffff;
            }

            .Cooldog_container .buttons a:last-child {
                margin-right: 0;
            }

.p1 {
    transform: translate3d(-577px, 0, 0) scale(0.88);
    opacity: 0;
    z-index: 1;
}

.p2 {
    transform: translate3d(-325px, 0, 0) scale(0.88);
    transform-origin: 0 50%;
    opacity: 0;
    z-index: 2;
}

.p3 {
    transform: translate3d(-125px, 0, 0) scale(0.88);
    transform-origin: 0 50%;
    opacity: 0.8;
    z-index: 3;
}

.p4 {
    transform: translate3d(0px, 0, 0) scale(1);
    opacity: 1;
    z-index: 4;
}

.p5 {
    transform: translate3d(220px, 0, 0) scale(0.88);
    transform-origin: 0 50%;
    opacity: 0.8;
    z-index: 3;
}

.p6 {
    transform: translate3d(425px, 0, 0) scale(0.88);
    transform-origin: 0 50%;
    opacity: 0;
    z-index: 2;
}

.p7 {
    transform: translate3d(625px, 0, 0) scale(0.88);
    transform-origin: 0 50%;
    opacity: 0;
    z-index: 1;
}
