.modaal-container {
    max-width: 96%;
}

.modaal {
    outline: none;
}

#modaal {
    display: none;
}

.modal_inner {
    display: none;
}

.modal_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.modal_list li {
    width: calc((100% / 3 - 1%) + (1% / 3));
}

.modal_list li:not(:nth-child(3n)) {
    margin-right: 1%;
}

.modal_list li:not(:nth-child(-n+3)) {
    margin-top: 1%;
}



@media only screen and (max-width: 480px) {

    .modal_list li {
        width: calc((100% / 2 - 1%));
    }

    .modal_list li:not(:nth-child(2n)) {
        margin-right: 1%;
    }

    .modal_list li:not(:nth-child(-n+2)) {
        margin-top: 1%;
    }


}




.modal_cast_info {
    display: table;
    margin: 0 auto 30px;
    text-align: center;
    width: 100%;
    max-width: 440px;
}

.m_c_s_box {
    display: table;
    margin: 0 auto;
}

.modal_cast_info .m_c_size {
    display: flex;
    flex-wrap: wrap;
}

.modal_cast_info .name {
    font-size: 18px;
    margin-bottom: 6px;
}

.m_c_size {
    margin-bottom: 14px;
    letter-spacing: .8px;
}

.modal_cast_info .m_c_size li {
    font-size: 16px;
    margin: 0 3px;
}

.modal_cast_info .catchcopy {
    font-size: 14px;
    background: rgba(217, 201, 233, 0.34);
    padding: 3px;
    border-radius: 8px;
    letter-spacing: 1px;
}

.modaal-close:focus:before,
.modaal-close:focus:after,
.modaal-close:hover:before,
.modaal-close:hover:after {
    background: #000;
}