.stopScroll{
    overflow: hidden;
}

.bannerSummer{
    position: fixed;
    top: -100%;
    visibility: hidden;
    pointer-events: none;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.3);
    min-height: 100svh;
    z-index: 210;
}

.bannerSummer.show{
    visibility: visible;
    pointer-events: all;
    top:0;
}



.showSummerBanner{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    overflow: hidden;
    color: #fff;
    background: transparent;
    cursor: pointer;
    position: fixed;
    bottom: .5rem;
    left: .5rem;
    background: #1e5aff;
    z-index: 15;
    animation: shakeBtn 12s linear infinite;
    box-shadow: 0 3px 8px rgba(0,0,0, .580);
    border: 1px solid #fff;
    visibility: visible;
    pointer-events: all;
}

.showSummerBanner.hide{
    left: -100%;
    visibility: hidden;
    pointer-events: none;
}



@keyframes shakeBtn{
    0%{
        transform: rotate(0);
        scale: 1;
    }
    97%{
        transform: rotate(0);
        scale: 1;
    }
    98%{
        transform: rotate(-1deg);
        scale: 1.070;
    }
    99%{
        transform: rotate(1deg);
    }
    100%{
        transform: rotate(-1deg);
    }

}
.showSummerBanner .textSum008{
    font-size: clamp(.5rem, 2vw, 1rem);
    background: #1e5aff;
    padding: clamp(.7rem, 2vw, 1rem);
    font-weight: 700;
}
.showSummerBanner span{
    padding: clamp(.7rem, 2vw, 1rem);
    font-size: clamp(.7rem, 2vw, 1.3rem);
    background: #0d3edd;
}



.bannerSummer::before{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: '';
    background: rgba(255, 255, 255, 0.3);
    z-index: -2;
    backdrop-filter: blur(2px);
}

.bannerSummer .summerCont{
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    height: 100%;
    width: 100%;
    padding: .7rem;
    border-radius: .8rem;
    box-shadow: 0 3px 18px rgba(0,0,0, .6);
    z-index: 10;
    position: relative;
    border: 2px solid #fff;
    background: rgba(133, 133, 133, 0.3);
    backdrop-filter: blur(17px);
    overflow: hidden;
    filter: contrast(110%) saturate(105%);
}
.bannerSummer .summerCont::before{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -5;
    box-shadow: inset 0 18px 50px #eee,
                inset 0 -18px 50px #eee;
}

.bannerSummer .summerCont .textSum001{
    font-weight: bolder;
    color: #444;
    font-size: clamp(1.3rem, 4vw, 3rem);
    padding: .5rem 1rem;
    background: linear-gradient(45deg, rgba(255,255,255, .3), rgba(255,255,255, .5));
    border-radius: .5rem;
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 7px 10px rgba(0,0,0, .280);
    border: 1px solid #fff;
    backdrop-filter: blur(15px);
}
.bannerSummer .summerCont .textSum002{
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 2px #000;
    font-size: clamp(1rem, 3vw, 2rem);
    width: max-content;
    margin-left: 50%;
    transform: translateX(-50%);
}
.bannerSummer .summerCont .textSum003{
    font-size: clamp(.6rem, 2vw, .9rem);
    color: #333;
    font-weight: 500;
}

.capsuleCont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: .5rem;
}
.capsuleCont .boxDate{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 7px 10px rgba(0,0,0, .280);
    border: 1px solid #fff;
    backdrop-filter: blur(15px);
    padding: .5rem 1rem;
    background: linear-gradient(45deg, rgba(255,255,255, .3), rgba(255,255,255, .5));
    border-radius: .5rem;
    width: calc(100% - 70%);
    
}
.capsuleCont .boxDate .textSum004,
.capsuleCont .boxDate .textSum005{
    font-size: clamp(1rem, 2vw, 1.5rem);
}
.summerCont .textSum006{
    font-size: clamp(.9rem, 2vw, 1.5rem);
    text-align: center;
}

.capsuleCont .boxDate p{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
}
.capsuleCont .boxDate p span{
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: bolder;
    color: #333;
    
}


.textSum007{
    padding: .5rem 3rem;
    margin-top: auto;
    border-radius: 3rem;
    box-shadow: 0 3px 8px rgba(0,0,0, .080);
    border: 2px solid #fff;
    width: max-content;
    margin-left: auto;
    cursor: pointer;
    font-weight: 600;
    background: #eee;
    color: #444;
}
.textSum007:hover{
    background: #ffff;
    color: #000;
    box-shadow: 0 3px 8px rgba(0,0,0, .280);
}











@media(max-width:790px){
.capsuleCont .boxDate{
    width: calc(100% - 7%);
}
.textSum007{
    width: 100%;
}
}