.loading {position: fixed;z-index: 1000;top: 0;right: 0;bottom: 0;left: 0;background: #fff;}
.loading__img {height:100vh;width:100%;position: relative;text-align: center;}
.loading__img h2{color:#000;}
.loading__img svg{max-width:600px;width:90%;height:auto;}
#load{stroke:#223E8B; stroke-width:.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:#223E8B;}
}

.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;
}

.slider{
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
/*.slider li::before{content:"";background:rgba(199,0,11,.6);width:100%;height:100%;display:block;mix-blend-mode:overlay;}*/
.home_main01{
  background:url(images/home_main01.jpg) 0 0 no-repeat;
  animation: slide01 10s ease-out infinite;
  animation-delay: 3s;
}
.home_main02{
  background:url(images/home_main02.jpg) 0 0 no-repeat;
  animation: slide02 10s ease-out infinite;
  animation-delay: 3s;
}
.home_main03{
  background:url(images/home_main03.jpg) 0 0 no-repeat;
  animation: slide03 10s ease-out infinite;
  animation-delay: 3s;
}
@keyframes slide01 {
    0% { opacity: 1; }
    22% { opacity: 1; }
    33% { opacity: 0; }
    86% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes slide02 {
    0% { opacity: 0; }
    33% { opacity: 1; }
    55% { opacity: 1; }
    66% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes slide03 {
    0% { opacity: 0; }
    33% { opacity: 0; }
    63% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; }
}


.scroll {position: absolute;bottom: 20px;left: 50%;z-index: 2;display: inline-block;
-webkit-transform: translate(0, -50%);transform: translate(0, -50%);text-decoration: none;}
.scroll span {display: block;width:1px;height:60px;background:#fff;
-webkit-animation: sdb 1.5s infinite;animation: sdb 1.5s infinite;}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, -30px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 30px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, -30px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 30px);
    opacity: 0;
  }
}

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