.rec-improvement-item{
    width: 100%;
    padding:0  20px;
}
.communitycsr__artical {
    max-width: 100%;
  }
.hide{
    display: none;
}
.modal__textlist{
    width: 100%;
    text-align: left;
}
.modal__textlist--item{
    list-style-type: disc;
}


.modalBottom{
    position: fixed ;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    transition: 0.35s all cubic-bezier(.4,.76,.7,.66);
    display: none;
    /* width: 100vw; */
}
.modalBottom__content{
    text-align: center;
    padding: 0 16px;

    padding-top: 128px;
    padding-bottom: 64px ;

    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}
.modalBottom__btn-group{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 58px;
}
.btnModalBottom__close{
    margin: 0 auto;
    display: inline-block;
    border: none;
    outline: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #fff;
    border-radius: 100%;
    -webkit-box-shadow: 0 0 6px rgb(34 34 34 / 15%);
    box-shadow: 0 0 6px rgb(34 34 34 / 15%);
}
/* .rec-oop-modal-content{
    padding-top: 128px;
    padding-bottom: 64px ;
} */
.modalBottom_content{
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    animation: 0.3s bottomToTop ease-in;
    max-height: 100vh;
    overflow-y: auto;
}
.modalBottom__overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
    animation: 0.2s fadeIn linear;
}
.modalBottom_content.active{
    animation: 0.3s topToBottom ease-in forwards;
}
.modalBottom__overlay.active{
    animation: 0.2s fadeOut linear forwards;
}
.dataModal{
    display: none;
}
@keyframes fadeIn {
    from{
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    from{
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes bottomToTop {
    0%{
        transform: translateY(100%);
    }
    90%{
        transform: translateY(20%);
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes topToBottom {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(100%);
    }
}
@media screen and (max-width : 991px) {
    .rec-improvement-item{
        margin-bottom: 24px;
    }
}
@media screen and (max-width: 576px) {
    .rec-improvement-item{
        padding: 0;
    }
    .rec-guiding{
        margin-bottom: 24px;
    }
    .modalBottom__btn-group{
        padding-top: 20px;
    }
    .rec-oop-modal-header{
        padding-top: 50px;
        padding-bottom: 44px;
    }
    .modalBottom__content{
        padding: 20px 16px;
    }
    .rec-list{
        text-align: left;
        margin-top: 20px;
    }
}