.loading {position: fixed;z-index: 1000;top: 0;right: 0;bottom: 0;left: 0;background: #fff;}
.loading__img {width:200px;max-width:90%;height:auto;position: absolute;top: 50%;left: 50%;
transform: translate(-50%,-50%);}
.loading__img svg{width:100%;height:auto;}
/*#load{stroke:#fff; stroke-width:0.5px; fill:transparent; stroke-dasharray:500px; stroke-dashoffset:500px;animation:anim 2.5s ease-in .2s forwards;}
@keyframes anim{
0%{stroke-dashoffset:500px;}
70%{stroke-dashoffset:0;}
75%{fill:transparent;}
100%{stroke-dashoffset:0; fill:#fff;}
}*/

.steam li{animation: steam 10s infinite linear;opacity:0;transform: scale(.2, .2);}
/*
.steam li:nth-child(2){animation: steam 10s infinite linear;}
*/
@keyframes steam{
0%{opacity:0;transform: scale(.2, .2) rotate(0deg);}
30%{opacity:1;}
70%{opacity:1;}
100%{opacity:0;transform: scale(1, 1) rotate(45deg);}
}
.l-t-r{opacity: 0;transform: translateX(-20px);transition: all 1s;}
.l-t-r.scrollin {opacity: 1;transform: translate(0);}
.b-t-t{opacity: 0;transform: translateY(20px);transition: all 1s;}
.b-t-t.scrollin {opacity: 1;transform: translateY(0);}

@-webkit-keyframes passing-bar{
0% {left: 0;right: auto;width: 0;}
50% {left: 0;right: auto;width: 101%;}
51% {left: auto;right: 0;width: 101%;}
100% {left: auto;right: 0;width: 0;}
}
@keyframes passing-bar{
0% {left: 0;width: 0;}
50% {left: 0;width: 101%;}
51% {left: 0;width: 101%;}
100% {left: 101%;width: 0;}
}
@-webkit-keyframes passing-inner{
0% { opacity: 0;}
70% { opacity: 0;}
100% { opacity: 1;}
}
@keyframes passing-inner{
0% { opacity:0;}
70% { opacity:0;}
100% { opacity:1;}
}

.passing .passing-box {display: block;text-align: center;}
.passing .passing-bar {position: relative;display: block;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
.passing .passing-bar:before {content: '';display: inline-block;width: 0;height: 100%;
position: absolute;left: 0;top: 0;z-index: 1;background: #222;}
.passing .passing-inner {opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);}
.passing.scrollin .passing-bar:before {-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
animation: passing-bar 1s ease 0s 1 normal forwards;}
.passing.scrollin .passing-inner {-webkit-animation: passing-inner 0s ease .5s 1 normal forwards;
animation:passing-inner 0s ease .5s 1 normal forwards;}

#page-animate::before {
 content: '';
 position: fixed;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: #222;
 z-index: 9999;
 pointer-events: none;
 right: 100%;
 -webkit-transition: right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 transition: right 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-animate::after {
 content: '';
 position: fixed;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: #222;
 z-index: 9999;
 pointer-events: none;
 left: 100%;
 -webkit-transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#page-animate.is-slide-in::before {
 right: 0;
}

#page-animate.is-slide::after {
 left: 0;
}

.scroll {position: absolute;bottom: 0;right: 15px;z-index: 2;display: inline-block;
-webkit-transform: translate(0, -50%);transform: translate(0, -50%);text-decoration: none;}
.scroll span {position: absolute;bottom: 40px;display: block;width:1px;height:80px;background:#231815;
-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, -40px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
	80% {
    opacity: 1;
  }
	
  100% {
    -webkit-transform: translate(0, 40px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, -40px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 40px);
    opacity: 0;
  }
}

.scroll span::before {content: "";display: block;position: absolute;bottom: 3px;right: 5%;width: 16px;
height: 16px;border-top: 1px solid #231815;transform: translateX(50%) rotate(135deg);}