.notice-container {
    background-color: white;
    width: 500px;
    text-align: center;
    border-radius: 20px;
    padding: 5px;
    margin-left: auto;
    margin-right: auto;
}

.notice-item {
    max-width:250px;
    border:1px dotted black;
    margin: 5px;
}

/* 100~450px : container = 100~450, item = 90~405*/
@media (min-width: 1px) {
    .notice-container {
        width: 100%;
    }
    .notice-item {
        max-width: 90%;
    }
}

/* 450~768px : container = 450~768, item = 405*/

@media (min-width: 450px) {
    #notice-container-outer{
        padding:10px;
    }
    .notice-container {
        width: 100%;
    }
    .notice-item {
        max-width: 405px;
    }
}


@media (min-width: 1000px) {
    .notice-container {
        width: 980px;
    }
    .notice-item {
        max-width: 450px;
    }
}

@media (min-width: 1200px) {
    .notice-container {
        width: 1180px;
    }
    .notice-item {
        max-width: 550px;
    }
}