/* let's clear some floats */
.clearfix::before,
.clearfix::after {
    display: table;
    content: " ";
}

.clearfix::after {
    clear: both;
}

.hide {
    display: none;
}

.none {
    display: none;
}

.text-overflow-ellipsis {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

/*border-1px 部分*/
.border-1px {
    position: relative;
}

.border-1px::before,
.border-1px::after {
    position: absolute;
    left: 0;

    display: block;
    width: 100%;

    content: " ";

    border-top: 1px solid #c8c7cc;
}

.border-1px::before {
    top: 0;

    display: none;
}

.border-1px::after {
    bottom: 0;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
    .border-1px::after,
    .border-1px::before {
        -webkit-transform: scaleY(0.7);
                transform: scaleY(0.7);
        -webkit-transform-origin: 0 0;
    }
    .border-1px::after {
        -webkit-transform-origin: left bottom;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    .border-1px::after,
    .border-1px::before {
        -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
    }
}

// 1px border 四条边都可以指定

.ui-border-1px {
    position: relative;
}

.ui-border-1px::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    display: block;

    content: "";
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
    pointer-events: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

    .ui-border-1px::after {
        position: absolute;
        top: 0;
        right: -100%;
        bottom: -100%;
        left: 0;

        display: block;

        content: "";
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
        -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
        pointer-events: none;
    }
}