@charset 'UTF-8';

@media (max-width: 500px) {

    body {
        height: 100%;
    }

    /*
top
================================================ */

    .top {
        width: 100%;
        height: 95vw;
        position: relative;
        top: 60px;
        left: 0px;
    }

    .top-image {
        width: 100%;
        height: 100%;
        border-radius: 0px;
        position: relative;
        left: 0%;
    }

    .gradation-mobile {
        width: 100%;
        height: 150px;
        position: absolute;
        bottom: 0px;
        background: linear-gradient(rgba(0, 0, 0, 0), rgb(29, 29, 29));
        z-index: 1;
    }

    .top-content-button,
    .top-content-text {
        display: none;
    }

    /*
content
================================================ */

    .content {
        top: 60px;
        height: 100%;
    }

    /*
event-upload
================================================ */
    .event-upload {
        position: fixed;
        width: 50px;
        height: 50px;
        right: 5%;
        bottom: 100px;
        border-radius: 50px;
        background-color: #ff914d;
        z-index: 1;
    }

    .event-upload img {
        position: relative;
        width: 30px;
        height: 30px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /*
serch-event
================================================ */

    .serch-event {
        position: relative;
        display: block;
        top: 90px;
    }

    /*
event-all
================================================ */

    .event-all {
        position: relative;
        /* top: 50px; */
        margin-bottom: 150px;
    }

    .event-all-top {
        position: relative;
        height: 50px;
        top: 0px;
    }

    .event-all-top-count p {
        top: 0px;
        margin-bottom: 5px;
    }

    /*
event-all-contents
================================================ */

    .event-all-contents {
        position: relative;
        margin-top: 20px;
    }

    .event-all-content-flex {
        position: relative;
        left: 0%;
        width: 100%;
    }

    .event-shape {
        margin-bottom: 10px;
        border-bottom: solid 1px;
        border-color: #a6a6a6;
    }

    .event-shape img {
        position: relative;
        height: 190px;
        width: 100%;
        border-radius: 10px;
        object-fit: cover;
    }

    .event-title {
        position: relative;
        width: 100%;
        bottom: 10px;
        font-size: 20px;
        font-weight: bold;
        color: black;
    }

    .event-place,
    .event-date,
    .event-time {
        position: relative;
        width: 100%;
        bottom: 20px;
        font-size: 14px;
        color: black;
    }

    .event-text {
        position: relative;
        font-size: 12px;
        width: 100%;
        bottom: 20px;
        color: black;
    }

}