html,
body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
a
{
	text-decoration: none;

	color: #333;
}
img
{
    vertical-align: middle;
}

/*上，下边框 0.5像素*/
.lBor,.rBor,.bBor,.tBor
{
    position: relative;
}
.tBor:before,
.bBor:after
{
    position:absolute;
    content: "";
    height:1px;
    background:rgba(255,255,255,0.2);
    left:0;
    right:0;
}
.tBor:before
{
    top:0;  
}
.bBor:after
{
    bottom:0;
}

/*左，右边框*/
.lBor:before,
.rBor:after
{
    position:absolute;
    content: "";
    width:1px;
    background:rgba(255,255,255,0.2);
    top:0;
    bottom:0;
}
.lBor:before
{
    left:0;
}
.rBor:after
{
    right:0;
}
.trblBor
{
    position: relative;
}
.trblBor:after
{
    position:absolute;
    content:"";
    top:0;
    left:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:100%;
    height:100%;
    border:1px dotted rgba(255,255,255,0.2);
    point-events:none;
}

/* 最后两个是为了检测Mobile ie9, 是因为Mobile IE9检测出的dpi为96dpi，与实际不符合 */
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx), (-ms-high-contrast:active), (-ms-high-contrast:none) {

    /*上，下边框*/
    .tBor:before,
    .bBor:after{
        -webkit-transform:scaleY(.5);
        -ms-transform:scaleY(.5);
        -o-transform:scaleY(.5);
        transform:scaleY(.5);
    }

    /*左，右边框*/
    .lBor:before,
    .rBor:after{
        -webkit-transform:scaleX(.5);
        -ms-transform:scaleX(.5);
        -o-transform:scaleX(.5);
        transform:scaleX(.5);
    }

    /*四边边框*/
    .trblBor:after{
        width:200%;
        height:200%;
        -webkit-transform:scale(.5);
        -ms-transform:scale(.5);
        -o-transform:scale(.5);
        transform:scale(.5);
    }

    /*上，左边框, 四边边框*/
    .tBor:before,
    .lBor:before,
    .trblBor:after{
        -webkit-transform-origin:0 0;
        -moz-transform-origin:0 0;
        -ms-transform-origin:0 0;
        -o-transform-origin:0 0;
        transform-origin:0 0;
    }

    /*下，右边框*/
    .bBor:after,
    .rBor:after{
        -webkit-transform-origin:100% 100%;
        -moz-transform-origin:100% 100%;
        -ms-transform-origin:100% 100%;
        -o-transform-origin:100% 100%;
        transform-origin:100% 100%;
    }
}

/* 解决1.5屏幕下某些边框不显式问题，小数位多写几位 */
@media (-webkit-device-pixel-ratio: 1.5){
    /*上，下边框*/
    .tBor:before,
    .bBor:after{
        -webkit-transform:scaleY(.66666666);
        -ms-transform:scaleY(.66666666);
        -o-transform:scaleY(.66666666);
        transform:scaleY(.66666666);
    }

    /*左，右边框*/
    .lBor:before,
    .rBor:after{
        -webkit-transform:scaleX(.6666);
        -ms-transform:scaleX(.6666);
        -o-transform:scaleX(.6666);
        transform:scaleX(.6666);
    }

    /*四边框*/
    .trblBor:after{
            width:150%;
            height:150%;
        -webkit-transform:scale(.6666);
        -ms-transform:scale(.6666);
        -o-transform:scale(.6666);
        transform:scale(.6666);
    }
}

@media (-webkit-device-pixel-ratio: 3){
    /*上，下边框*/
    .tBor:before,
    .bBor:after{
        -webkit-transform:scaleY(.3333);
        -ms-transform:scaleY(.3333);
        -o-transform:scaleY(.3333);
        transform:scaleY(.3333);
    }

    /*左，右边框*/
    .lBor:before,
    .rBor:after{
        -webkit-transform:scaleX(.3333);
        -ms-transform:scaleX(.3333);
        -o-transform:scaleX(.3333);
        transform:scaleX(.3333);
    }
    /*四边框*/
    .trblBor:after{
            width:300%;
            height:300%;
        -webkit-transform:scale(.3333);
        -ms-transform:scale(.3333);
        -o-transform:scale(.3333);
        transform:scale(.3333);
    }
}
.fadeInLong
{
    -webkit-animation: fadeIn 2s ease 0s 1 both;
       -moz-animation: fadeIn 2s ease 0s 1 both;
        -ms-animation: fadeIn 2s ease 0s 1 both;
         -o-animation: fadeIn 2s ease 0s 1 both;
            animation: fadeIn 2s ease 0s 1 both;
}
.fadeOutLong
{
    -webkit-animation: fadeOut 2s ease 0s 1 both;
       -moz-animation: fadeOut 2s ease 0s 1 both;
        -ms-animation: fadeOut 2s ease 0s 1 both;
         -o-animation: fadeOut 2s ease 0s 1 both;
            animation: fadeOut 2s ease 0s 1 both;
}
@-webkit-keyframes fadeOut
{
    0%
    {
        opacity: 1;
    }

    100%
    {
        opacity: 0.5;
    }
}

@keyframes fadeOut
{
    0%
    {
        opacity: 1;
    }

    100%
    {
        opacity: 0.5;
    }
}

@-webkit-keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

@keyframes fadeIn
{
    0%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}