@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');
.info-svg{
  position:absolute;
}
.info{
  position:relative;
  margin:0;
  color:#000;
  font-family: "Arimo", sans-serif;
  font-weight:500;
  font-size:16px;
  top:6px;
  left:40px;
}
.union{
  position:relative;
  margin:0;
  color:#000;
  font-family: "Arimo", sans-serif;
  font-weight:500;
  font-size:16px;
}
.union.first{
  top:7px;
  left:12px;
}
.union.second{
  top:-12px;
  left:95px;
}
.info-whtie{
  position:relative;
  margin:0;
  color:#fff;
  font-family: "Arimo", sans-serif;
  font-weight:500;
  font-size:16px;
  top:6px;
  left:37px;
}
.jump-title{
  position:absolute;
  color:#1B21F5;
  background:#fff;
  padding: 10px 0 12px 14px;
  width:var(--jump-title-w);
  border-radius:9px;
  transform: rotate(-2deg);
  font-family: "Arimo", sans-serif;
  font-weight:700;
  font-size:16px;
  animation: 3s infinite normal jump;
  box-shadow: 0px 5px 21px rgba(0, 0, 0, 0.5);
}
.jump-svg{
  position:relative;
  left:var(--jump-svg-l);
  top:var(--jump-svg-t);
  transform: rotate(-20deg);
  box-shadow: 0px 5px 21px rgba(0, 0, 0, 0.5);
  animation: 3s infinite normal jump-svg;
}
:root{
    --jump-title-w:373px;
    --jump-svg-t:20px;
    --jump-svg-l:359px;
}
@media screen and (max-width: 480px){
    :root{
        --jump-title-w:280px;
        --jump-svg-t:25px;
        --jump-svg-l:259px;
    }
}
@keyframes jump{
  10%{
    transform: rotate(0deg);
  }
  20%{
    transform: rotate(-1deg);
  }
  30%{
    transform: rotate(0deg);
  }
  40%{
     transform: rotate(-2deg);
  }
}
@keyframes jump-svg{
  10%{
    transform: rotate(0deg);
  }
  20%{
    transform: rotate(-10deg);
  }
  30%{
    transform: rotate(0deg);
  }
  40%{
    transform: rotate(-20deg);
  }
}
.btnw{
  display: block;
  width:280px;
  height:86px;
  border:1px solid gray;
  border-radius:19px;
}
.btnw > p{
  color:#fff;
  font-size:25px;
  font-weight:700;
  font-family: "Arimo", sans-serif;
  margin:0;
  position:absolute;
  top:30px;
  left:54px;
}
.border-anim{
  width:280px;
  height:86px;
  // border:2px solid gray;
  border-radius:19px;
  animation: border 4s infinite;
}
@keyframes border{
  0%{
    opacity:0;
  }
  25%{
    opacity:1;
    box-shadow: 2px -2px 0 0 #fff;
  }
  50%{
    opacity:0;
  }
  75%{
    opacity:1;
    box-shadow: -2px 2px 0 0 #fff;
  }
  100%{
    opacity:0;
  }
}
.line{
    opacity:0.7;
}
.line:active{
    opacity:1;
    border-bottom:solid 5px #1B21F5;
    cursor:pointer;
}
@media screen and (min-width: 1200px){
    .line:hover{
        opacity:1;
        border-bottom:solid 5px #1B21F5;
        cursor:pointer;
    }
}
/*--------------------------------------------*/
.log-in-href{
  text-decoration: none;
}
.log-in-href:hover > .log-in-btn{
  background:#767AF9;
}
.log-in-btn{
  width:170px;
  height:45px;
  background:transparent;
  border: solid 1px #767AF9;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  gap:18px;
}
.log-in-btn > p{
  color:#E3FD5E;
  font-size:12px;
  font-family: "Arimo", sans-serif;
}