body{padding: 0; margin: 0;}
.loading-section {
   padding: 28em 0;
   background: #fff;
   position: fixed;
   z-index: 99999;
   width: 100%;
   height: 100%;
}


/* common */
 .loading {
   font-size: 84px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   text-align: center;
   display: flex;
   width: 230px;
   margin: auto;
   min-height: 100%;
    align-items: center;
    margin-top: 30px;
}
 .loading span {
   display: inline-block;
   /*margin: 0 -0.05em;*/
}


/* code #1 */
 .loading01 span {
   animation: loading01 1.4s infinite alternate;
   display: block;
   height: 97.57px ;
   margin: 0 2px;
   background-repeat: no-repeat;
}
 .loading01 span:nth-child(1) {
    background-image: url(../loading/color-1.svg);
    width: 19.6px;
   animation-delay: 0s;
}
 .loading01 span:nth-child(2) {
  background-image: url(../loading/color-2.svg);
  width: 19.6px;
   animation-delay: 0.1s;
}
 .loading01 span:nth-child(3) {
  background-image: url(../loading/color-3.svg);
  width: 19.6px;
  margin-right: 10px;
   animation-delay: 0.2s;
}
 .loading01 span:nth-child(4) {
  background-image: url(../loading/color-4.svg);
  width: 30.37px;
   animation-delay: 0.3s;
}
 .loading01 span:nth-child(5) {
  background-image: url(../loading/color-5.svg);
  width: 49.3px;
   animation-delay: 0.4s;
}
 .loading01 span:nth-child(6) {
  background-image: url(../loading/color-6.svg);
  width: 30.62px;
  margin-right: 10px;
   animation-delay: 0.5s;
}
 .loading01 span:nth-child(7) {
  background-image: url(../loading/color-7.svg);
  width: 34.39px;
   animation-delay: 0.6s;
}
.loading01 span:nth-child(8) {
  background-image: url(../loading/color-8.svg);
  width: 13.34px;
   animation-delay: 0.6s;
}
.loading01 span:nth-child(9) {
  background-image: url(../loading/color-9.svg);
  width: 47.2px;
   animation-delay: 0.6s;
}
.loading01 span:nth-child(10) {
  background-image: url(../loading/color-10.svg);
  width: 30.47px;
   animation-delay: 0.6s;
}
.loading01 span:nth-child(11) {
  background-image: url(../loading/color-11.svg);
  width: 47.34px;
   animation-delay: 0.6s;
}
.loading01 span:nth-child(12) {
  background-image: url(../loading/color-12.svg);
  width: 48.95px;
   animation-delay: 0.6s;
}
 @keyframes loading01 {
   0% {
     opacity: 1;
  }
   100% {
     opacity: 0;
  }
}

@media(max-width: 768px){
  .loading-section {
   padding: 18em 0;}
}