$leftb:"./../../assets/welfare/leftb.png";
$leftb_1:"./../../assets/welfare/leftb_1.png";
$star:"./../../assets/welfare/star.png";


.container{
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: var(--zindex-welfare);
  left: 0;
  bottom: 12rem;

  max-width: 510px;
}
.content{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.8rem;
  transition: all var(--transition);
  &_close{
    margin-left: -100%;
  }
}
.wlf_btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  width: 5rem;
  aspect-ratio: 144/162;
  background: url($leftb);
  background-size: 100% 100%;
  &_press{
    background: url($leftb_1);
    background-size: 100% 100%;
  }
  opacity: 0;
  transform: translateX(-100%);
  &_open{
    opacity: 1;
    transform: translateX(0%);
    transition: all .3s ease;
  }
  &_close{
    opacity: 0;
    transform: translateX(-100%);
    transition: all .3s ease;
  }
}
.wlf_protect{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: auto;
  //margin-left: 0.5rem;
  margin-top: -0.5rem;
  position: relative;
  & .p_img{
    width: 3.3rem;
    height: auto;
  }
  & .p_stars{
    top: -1rem;
    left: 0rem;
    right: 1.4rem;
    bottom: 1.2rem;
    position: absolute;
  }
  & .p_txt{
    position: absolute;
    z-index: 2;
    height: 1.5rem;
    width: auto;
    top: 2.2rem;
  }
}
.wlf_first{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  aspect-ratio: 91/115;
  margin-left: -0.5rem;
  position: relative;
  &_mask{
    width: 3.2rem;
    aspect-ratio: 84/86;
    flex-shrink: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    &:after{
      content: '';
      position: absolute;
      inset: -20%;
      background: linear-gradient(-45deg, rgba(255,255,255,0) 45%, rgb(255,255,255,1), rgba(255,255,255,0) 60%);
      animation: shark-wrap 3s infinite;
      transform: translateX(-100%);
      mix-blend-mode: overlay;
    }
  }
  & .f_img{
    width: 3.2rem;
    height: auto;
  }
  & .f_txt{
    position: absolute;
    z-index: 2;
    height: 1.52rem;
    width: auto;
    top: 2.6rem;
  }
  & .f_cdtxt{
    position: absolute;
    z-index: 2;
    top: 2.8rem;
    color: #fff;
    -webkit-text-stroke: 4px #2a3f5b;
    font-weight: 600;
    font-size: 0.9rem;
    &::before{
      content: attr(data-title);
      position: absolute;
      background-image: linear-gradient(to bottom,#fff,#24e2fc);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0px #2a3f5b;
      font-weight: 600;
      font-size: 0.9rem;
    }
  }
}
.wlf_bind{
  display: flex;
  position: relative;
  justify-content: center;
  width: 3.5rem;
  aspect-ratio: 102/99;
  margin-left: -0.5rem;
  & .b_icon{
    position: relative;
    width: 3.5rem;
    height: 3.38rem;
    & .b_bg{
      width: 3.23rem;
      height: auto;
    }
    & .b_get{
      position: absolute;
      z-index: 1;
      height: 0.77rem;
      width: auto;
      top:0.3rem;
      left: 1.5rem;
    }
    & .b_num{
      position: absolute;
      z-index: 2;
      left: 3rem;
      top:1.1rem;
      font-size: 0.75rem;
      color: #fff088;
      -webkit-text-stroke: 3px #973500;
      &::before{
        content: attr(data-title);
        position: absolute;
        background: #fff088;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 0px #973500;
        font-weight: bold;
        font-size: 0.75rem;
      }
    }
  }
  & .b_txt{
    position: absolute;
    z-index: 2;
    height: 1rem;
    width: auto;
    top: 2.8rem;
  }
}
@keyframes shark-wrap {
  to {
    transform: translateX(100%);
  }
}
.star{
  position: absolute;
  width: 1rem;
  aspect-ratio: 23/28;
  background: url($star) no-repeat;
  background-size: 100% 100%;
  opacity: 0;
}
.star_ani_0{
  top: 1rem;
  left: 1rem;
  width: 0.45rem;
  animation: blinking_1 3s linear infinite;
}
.star_ani_1{
  width: 0.6rem;
  top: 2.2rem;
  right: 1rem;
  animation: blinking_2 6.5s linear infinite;
}
.star_ani_2{
  width: 0.4rem;
  top: 2.8rem;
  right: 0.5rem;
  animation: blinking_2 4.5s linear infinite;
}
.star_ani_3{
  width: 0.35rem;
  top: 3rem;
  right: -0.5rem;
  animation: blinking_1 3.5s linear infinite;
}
.star_ani_4{
  width: 0.4rem;
  top: 1rem;
  right: 0rem;
  animation: blinking_2 5.5s linear infinite;
}
@keyframes blinking{
  0%,100%{
    transform: scale(1);
    opacity: 0;
  }
  50%{
    transform: scale(1.5);
    opacity: 1;
  }
}
@keyframes blinking_1{
  0%,25%{
    transform: scale(1);
    opacity: 0;
  }
  50%{
    transform: scale(1.5);
    opacity: 1;
  }
  75%,100%{
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes blinking_2{
  0%,33%{
    transform: scale(1);
    opacity: 0;
  }
  50%{
    transform: scale(1.5);
    opacity: 1;
  }
  66%,100%{
    transform: scale(1);
    opacity: 0;
  }
}

.wlf_bpack{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  aspect-ratio: 104/115;
  margin-left: -0.5rem;
  position: relative;
  &_mask{
    width: 3.8rem;
    aspect-ratio: 104/89;
    flex-shrink: 0;
    position: absolute;
    overflow: hidden;
    top: 0;
    &:after{
      content: '';
      position: absolute;
      inset: -20%;
      background: linear-gradient(-45deg, rgba(255,255,255,0) 45%, rgb(255,255,255,1), rgba(255,255,255,0) 60%);
      animation: shark-wrap 3s infinite;
      transform: translateX(-100%);
      mix-blend-mode: overlay;
    }
  }
  & .f_img{
    width: 3.8rem;
    height: auto;
  }
  & .f_cdtxt{
    position: absolute;
    z-index: 2;
    top: 3rem;
    color: #fff;
    -webkit-text-stroke: 4px #2a3f5b;
    font-weight: 600;
    font-size: 0.9rem;
    &::before{
      content: attr(data-title);
      position: absolute;
      background-image: linear-gradient(to bottom,#fff,#24e2fc);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0px #2a3f5b;
      font-weight: 600;
      font-size: 0.9rem;
    }
  }
}
