.han-fib1,
.han-fib1 *{box-sizing:border-box;}
.han-fib1{
  --han-fib1-row-h:180px;
  --han-fib1-icon-size:34px;
  --han-fib1-item-gap:34px;
  --han-fib1-logo-box:160px;
  --han-fib1-logo-scale:72%;
  --han-fib1-speed:22s;
  width:100%;
  min-height:var(--han-fib1-row-h);
  overflow:hidden;
  border-radius:26px;
  background:#ffff;
  isolation:isolate;
}
.han-fib1__fade{
  position:absolute;
  top:0;
  bottom:0;
  width:13%;
  z-index:5;
  pointer-events:none;
}
.han-fib1__fade--left{
  left:0;
  background:linear-gradient(90deg, rgba(247,247,247,1) 0%, rgba(247,247,247,.92) 35%, rgba(247,247,247,0) 100%);
}
.han-fib1__fade--right{
  right:0;
  background:linear-gradient(270deg, rgba(247,247,247,1) 0%, rgba(247,247,247,.92) 35%, rgba(247,247,247,0) 100%);
}

.han-fib1__lane{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.han-fib1__lane--social{
  left:0;
  width:50%;
  padding-right:calc(var(--han-fib1-logo-box) * 0.24);
  justify-content:flex-start;
  z-index:1;
}
.han-fib1__lane--checks{
  left:50%;
  width:50%;
  margin-left:calc(var(--han-fib1-logo-box) * -0.18);
  padding-left:calc(var(--han-fib1-logo-box) * 0.30);
  justify-content:flex-start;
  z-index:2;
  pointer-events:none;
}

.han-fib1__track{
  display:flex;
  width:max-content;
  align-items:center;
  will-change:transform;
}
.han-fib1__lane--social .han-fib1__track{
  animation:hanFib1MarqueeLeftHalf var(--han-fib1-speed) linear infinite;
}
.han-fib1__lane--checks .han-fib1__track{
  animation:hanFib1MarqueeRightHalf var(--han-fib1-speed) linear infinite;
}

.han-fib1__group{
  display:flex;
  align-items:center;
  gap:var(--han-fib1-item-gap);
  padding:0 calc(var(--han-fib1-item-gap) / 2);
}
.han-fib1__social-item,
.han-fib1__check-item{
  width:var(--han-fib1-icon-size);
  height:var(--han-fib1-icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:1;
}
.han-fib1__social-item{
  color:#161616;
  font-size:var(--han-fib1-icon-size);
  transition:transform .22s ease, opacity .22s ease;
}
.han-fib1__social-item:hover{
  transform:translateY(-2px) scale(1.04);
  opacity:.95;
}
.han-fib1__social-item i,
.han-fib1__social-item svg,
.han-fib1__check-item i,
.han-fib1__check-item svg{
  width:1em;
  height:1em;
  display:block;
}
.han-fib1__check-item{
  color:#59db7a;
  font-size:calc(var(--han-fib1-icon-size) * .94);
  opacity:.92;
}

.han-fib1__center{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:4;
}
.han-fib1__center-box{
  width:var(--han-fib1-logo-box);
  height:var(--han-fib1-logo-box);
  border-radius:24px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(17,17,17,.08);
  color:#2b6ff7;
  padding:16px;
}
.han-fib1__center-image{
  max-width:var(--han-fib1-logo-scale);
  max-height:var(--han-fib1-logo-scale);
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}
.han-fib1__center-icon{
  width:48%;
  height:48%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:56px;
}
.han-fib1__center-icon i,
.han-fib1__center-icon svg{
  width:1em;
  height:1em;
  display:block;
}

@keyframes hanFib1MarqueeLeftHalf{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
@keyframes hanFib1MarqueeRightHalf{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}

@media (max-width: 1024px){
  .han-fib1{
    --han-fib1-row-h:170px;
    --han-fib1-icon-size:30px;
    --han-fib1-item-gap:26px;
    --han-fib1-logo-box:140px;
  }
  .han-fib1__fade{ width:15%; }
  .han-fib1__lane--social{
    padding-right:calc(var(--han-fib1-logo-box) * 0.20);
  }
  .han-fib1__lane--checks{
    margin-left:calc(var(--han-fib1-logo-box) * -0.14);
    padding-left:calc(var(--han-fib1-logo-box) * 0.24);
  }
}
@media (max-width: 767px){
  .han-fib1{
    --han-fib1-row-h:130px;
    --han-fib1-icon-size:24px;
    --han-fib1-item-gap:18px;
    --han-fib1-logo-box:96px;
    --han-fib1-logo-scale:76%;
  }
  .han-fib1__fade{ width:18%; }
  .han-fib1__center-box{
    padding:10px;
    border-radius:18px;
  }
  .han-fib1__center-icon{
    font-size:34px;
  }
  .han-fib1__lane--social{
    padding-right:calc(var(--han-fib1-logo-box) * 0.12);
  }
  .han-fib1__lane--checks{
    margin-left:calc(var(--han-fib1-logo-box) * -0.10);
    padding-left:calc(var(--han-fib1-logo-box) * 0.16);
  }
}
