.load{
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  transition: opacity 1.5s ease 4.8s;
  opacity: 1;
}
.load-inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  max-width: 350px;
}
.load-logo{
  transition: opacity 1.5s ease 3.3s;
  margin-bottom: 10px;
}
.load-logo img{
  width: 100%;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.load-txts{
  overflow: hidden;
  margin: 0;
  transition: opacity 1.5s ease 3.3s;
}
@media screen and (max-width: 768px) {
  .load-logo{
  }
  .load-txts{
  }
}
.load-txts li{
  float: left;
  opacity: 0;
}
.load-txts li:nth-child(1){
  width: 21%;
  margin-right: 3%;
  transition: opacity 1.5s ease .6s;
}
.load-txts li:nth-child(2){
  width: 25%;
  margin-right: 4%;
  transition: opacity 1.5s ease 1.2s;
}
.load-txts li:nth-child(3){
  width: 46%;
  transition: opacity 1.5s ease 1.8s;
}

body{
  overflow: hidden;
}

body[data-load-state="start"] .load-logo img,
body[data-load-state="end"] .load-logo img,
body[data-load-state="complete"] .load-logo img{
  opacity: 1;
}
body[data-load-state="end"] .load-logo,
body[data-load-state="complete"] .load-logo{
  opacity: 0;
}

body[data-load-state="start"] .load-txts li,
body[data-load-state="end"] .load-txts li,
body[data-load-state="complete"] .load-txts li{
  opacity: 1;
}
body[data-load-state="end"] .load-txts,
body[data-load-state="complete"] .load-txts{
  opacity: 0;
}
body[data-load-state="end"] .load,
body[data-load-state="complete"] .load{
  opacity: 0;
  pointer-events: none;
}
body[data-load-state="complete"]{
  overflow: auto;
}