#att-img-pop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    #att-img-pop * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    #att-img-pop .att-close {
        position: fixed;
        top: 85%;
        left: 50%;
        margin-left: -25px;
        width: 40px;
        height: 40px;
        color: #fff;
        background: #fff;
        border-radius: 50%;
        transition: .3s;
        cursor: pointer;
    }

        #att-img-pop .att-close:after,
        #att-img-pop .att-close:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            width: 20px;
            height: 2px;
            margin: -1px 0 0 -10px;
            background: #333;
            transition: .3s;
        }

        #att-img-pop .att-close:hover {
            background: #c2b2a5;
        }

            #att-img-pop .att-close:hover:after,
            #att-img-pop .att-close:hover:before {
                background: #fff;
            }

        #att-img-pop .att-close:after {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        #att-img-pop .att-close:before {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

    #att-img-pop img {
        position: fixed;
        left: 50%;
        top: 50%;
        max-width: 90%;
        max-height: 65%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }