.loading{position: fixed;left: 0;top:0;z-index: 9;background: #fff;width: 100%;height: 100%;animation: loadingLayer 3s linear forwards;}
.loading .content{width: 312px;position: absolute;left: 50%;top:50%;
-webkit-transform:translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%);}
.loading .logo{width: 114px;height: 114px;margin: 0 auto 30px;position: relative;}

.loading .text{position: relative;}

.loading .logo img,
.loading .text img{width: 100%;position: absolute;left: 0;top:0;opacity: 0;z-index: 2;}


.loading .logo img{-webkit-animation: show 0.5s 0.8s ease forwards;animation: show 0.5s 0.8s ease forwards;}
.loading .text img{-webkit-animation: show 0.5s 1s ease forwards;animation: show 0.5s 1s ease forwards}

@-webkit-keyframes pathAni{0%{stroke-dashoffset:-800; }100%{stroke-dashoffset:0;}}
@keyframes pathAni{0%{stroke-dashoffset:-800; }100%{stroke-dashoffset:0;}}

@keyframes loadingLayer{
    0%{background-color: #000;}
    30%{background-color: #ccc;}
    60%{background-color: #eee;}
    85%{transform:translateY(0);}
    100%{transform:translateY(-100%);}
}

@-webkit-keyframes hide{0%{opacity:1;}100%{opacity:0;}}
@keyframes hide{0%{opacity:1;}100%{opacity:0;}}

@-webkit-keyframes show{0%{opacity:0;}100%{opacity:1;}}
@keyframes show{0%{opacity:0;}100%{opacity:1;}}

@media screen and (max-width: 468px){
.loading .content{width: 180px;}
.loading .logo{width: 88px;height: 88px;margin-bottom: 18px;}

}