.bannerSummer{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    row-gap: .5rem;
    z-index: 110;
    background: rgba(0,0,0, .580);
    pointer-events: none;
    top: -100%;
    visibility: hidden;
}
.bannerSummer.show{
    top: 0;
    visibility: visible;
    pointer-events: all;
}



.bannerSummer::before{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(2px);
    content: '';
    z-index: -1;
}
.bannerSummer .summerCont{
    width: 100%;
    height: 100%;
    padding: .5rem;
    display: flex;
    flex-direction: column;
}
.bannerSummer .summerCont .groupText{
    background: rgba(253, 253, 253, 0.2);
    border-radius: 1rem;
    padding: .5rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 15px rgba(0,0,0, .380);
    border: 1px solid #aaa;
    width: max-content;
    margin-bottom: 1rem;
}
.bannerSummer .summerCont .groupText .sumText001{
    color: #eee;
    padding: .5rem 1rem;
    font-size: clamp(1rem, 3vw, 1.5rem);
    border-radius: 5rem;
    width: max-content;
    position: relative;
    overflow: hidden;
    background: rgba(233, 96, 5, 0.567);
    border: 1px solid #97440d;
    box-shadow: 0 5px 8px rgba(0,0,0, .780);
    margin-bottom: .5rem;
}   
.bannerSummer .summerCont .groupText .sumText002{
    color: #dddddd;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 500;
}
.bannerSummer .summerCont .groupText .sumText003{
    color: #fff;
    font-size: clamp(.8rem, 2vw, 1.1rem);
}


.bannerSummer .summerCont .datesCont{
    border-radius: 1rem;
    padding: .5rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 15px rgba(0,0,0, .380);
    border: 1px solid #aaa;
    display: flex;
    width: 100%;
    flex-direction: column;
    background: rgba(253, 253, 253, 0.2);
    margin-bottom: 1rem;
}
.bannerSummer .summerCont .datesCont .daySum{
    display: flex;
    align-items: center;
    width: 100%;
    gap: .5rem;
}
.bannerSummer .summerCont .datesCont .daySum img{
    width: clamp(2.5rem, 5vw, 6rem);
    filter: drop-shadow(0 2px 2px #000);
}
.bannerSummer .summerCont .datesCont .daySum p{
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    color: #fff;
    font-weight: 6000;
    text-shadow: 0 2px 2px #000;
}

.bannerSummer .summerCont .datesCont .sumText005{
    color: #fff;
    font-size: clamp(1.1rem, 3vw, 2.5rem);
    text-shadow: 0 2px 2px #000;
}
.bannerSummer .summerCont .closedCont{
    border-radius: 1rem;
    padding: .5rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 8px 15px rgba(0,0,0, .380);
    border: 1px solid #aaa;
    display: flex;
    width: 100%;
    flex-direction: column;
    background: rgba(253, 253, 253, 0.2);
    margin-bottom: 1rem;
}
.bannerSummer .summerCont .closedCont .sumText006{
    color: #fff;
    font-size: clamp(.8rem, 3vw, 1.1rem);
}
.bannerSummer .summerCont .closedCont .sumText007{
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    color: #fff;
    text-shadow: 0 2px 3px #000;

}

.bannerSummer .summerCont button{
    padding: .3rem 2rem;
    border-radius: 3rem;
    cursor: pointer;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-top: auto;
    margin-left: 50%;
    transform: translateX(-50%);
    width: max-content;
    background: #da5508;
    color: #fff;
    border: 2px solid #fff;
    font-weight: bolder;
}
.bannerSummer .summerCont button:hover{
    background: #ff4500;
    color: #fff;
}

.showSummerTime{
    position: fixed;
    z-index: 15;
    top: 10%;
    left: .5rem;
    padding: .5rem 1rem;
    border-radius: .3rem;
    cursor: pointer;
    background: #3a4b5a;
    border: 1px solid #eee;
    box-shadow: 0 3px 8px rgba(0,0,0, .180);
    color: #fff;
}
.showSummerTime:hover{
    background: #5d758a;
}
.showSummerTime.hide{
    visibility: hidden;
    pointer-events: none;
    left: -100%;
}







@media(max-width:780px){
    .bannerSummer .summerCont .groupText{
        width: 100%;
    }
    .bannerSummer .summerCont button{
        width: 100%;
    }

}