html,body{
  padding:0;
  margin:0;
  width:100%;height:100%;
}
.gd{
  padding:0;
  margin:0;
  width:100%;height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#C1C1C1;
}


.container{
  /* display:flex; */
  align-items:center;
}

.loader{
  position:absolute;
  width:110px;height:65px;
}

.loader:nth-of-type(2){transform:rotate(60deg)}
.loader:nth-of-type(3){transform:rotate(-60deg)}


.loader .loaderin{width:100%;height:100%;position:relative}

.loader .loaderin span{
  position:absolute;
  width:0.3rem;height:0%;
  background:#000000;z-index:999999;
}

.hx1{left:0;
  animation: load1 7.2s ease  infinite;
}
.hx2{right:0;
  animation: load2 7.2s ease .4s infinite;
}
.hx3{right:0;
  animation: load3 7.2s ease .8s infinite;
}
.hx4{right:0;
  animation: load4 7.2s ease 1.2s infinite;
}
.hx5{left:0;
  animation: load5 7.2s ease 1.6s infinite;
}
.hx6{left:0;
  animation: load6 7.2s ease 2.0s infinite;
}

@keyframes load1 {
  0%{bottom:0;height:0}
  6.944444444%{bottom:0;height:100%}
  50%{top:0;height:100%}
  59.944444433%{top:0;height:0}
/*   91.6666667%{top:0;height:0%;} */
}

@keyframes load2 {
  0%{top:0;height:0}
  6.944444444%{top:0;height:100%}
  50%{bottom:0;height:100%}
  59.944444433%{bottom:0;height:0}
/*   91.6666667%{bottom:0;height:0%} */
}

@keyframes load3 {
  0%{top:0;height:0}
  6.944444444%{top:0;height:100%}
  50%{bottom:0;height:100%}
  59.94444443%{bottom:0;height:0}
/*   91.6666667%{bottom:0;height:0%;} */
}

@keyframes load4 {
  0%{top:0;height:0}
  6.944444444%{top:0;height:100%}
  50%{bottom:0;height:100%}
  59.94444443%{bottom:0;height:0}
/*   91.6666667%{bottom:0;height:0%;} */
}

@keyframes load5 {
  0%{bottom:0;height:0}
  6.944444444%{bottom:0;height:100%}
  50%{top:0;height:100%}
  59.94444443%{top:0;height:0}
/*   91.6666667%{top:0;height:0%;} */
}

@keyframes load6 {
  0%{bottom:0;height:0}
  6.944444444%{bottom:0;height:100%}
  50%{top:0;height:100%}
  59.94444443%{top:0;height:0}
/*   91.6666667%{top:0;height:0%;} */
}