.modal-enter {
  opacity: 0;
  transform: scale(0.9);
}
.modal-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 300ms ease, transform 300ms ease;
}
.modal-exit {
  opacity: 1;
  transform: scale(1);
}
.modal-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms ease, transform 300ms ease;
}
.modal-content {
    width: 90%;
    background: var(--skin__bg_2);
    border: var(--lobby__px) solid var(--skin__border);
}

div#NotiBottom {
    height: fit-content;
}
.bottom-modal--icon {
    width: auto;
    height: 5rem; 
}
.better_exp {
    color: darkorange;
    font-size: 1.35rem;
}
.bottom-modal--content {
    width: 100%;
    padding: .85rem;
    transition: all .25s;
}
.offcanvas-backdrop.fade.show {
    -webkit-backdrop-filter: blur(.5rem)!important;
    backdrop-filter: blur(.5rem) !important;
    background: #00000054;
    opacity: 1 !important;
}
.bottom-modal--content-main {
    display: grid;
    grid-template-columns: 25% 75%;
    flex-direction: row;
    grid-auto-flow: column;
    grid-column-gap: .18rem;
    margin-bottom: .188rem;
}
.bottom-modal .btn-group {
    display: flex
;
    justify-content: flex-end;
}
.bottom-modal .bottom-btn--cancel {
    color:#eee;
}
.bottom-modal .bottom-btn--agree {
    color: var(--a2hs-btn-color, #fff) !important;
    background-color: #009d81 !important;
}
.bottom-modal .bottom-btn {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .72rem .85rem;
    border-radius: .48rem;
    min-width: 5rem;
}

.bottom-btn-tips {
    position: absolute;
    top: -1.18rem;
    right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .1rem .22rem;
    font-size: .6658rem;
    font-weight: 400;
    line-height: 1.7;
    color: #fff;
    background: #ea4e3d;
    border-radius: .5rem .5rem 0 .5rem;
    animation: heartBeat 1s linear infinite;
}
.close_wrap {
    display: flex;
    justify-content: flex-end;
}

.bottom-modal--desc {
    width: 94%;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
}

.close_bottom_noti-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background-color: #868686;
    border-radius: 50%;
}
span.close_bottom_noti {
    font-size: 1.5rem;
    align-items: center;
    text-align: center;
}

@keyframes heartBeat {
0% {
    transform: scale(1);
}
14% {
    transform: scale(1.3);
}
28% {
    transform: scale(1);
}
42% {
    transform: scale(1.3);
}
70% {
    transform: scale(1);
}
}