nav {
    position: relative;
}

.notice {
    display: block;
}

.notice .main-title {
    text-align: center;    

    background: url('../img/banner-blog-01.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#banner-blog-02 {
    background: url('../img/banner-blog-02.webp') !important;
    background-position: center -20rem !important;
    background-repeat: no-repeat !important;

}

#banner-blog-03 {
    background: url('../img/banner-blog-03.webp') !important;
    background-position: center -20rem !important;
    background-repeat: no-repeat !important;
}

.notice .main-title h2{
    position: relative;
    z-index: 1;
    color: var(--white-color);
    padding: 12rem 1rem;
    background-color: rgba(36, 36, 36, 0.75);
}

.notice .auto-container {
    margin-top: 3rem;
}

.notice .normal-text p i {
    transform: rotate(90deg);
    font-size: 2rem;
    margin-left: 20px;
    margin-right: 5px;
    color: var(--primary-color);
}

.notice .normal-text p span {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.notice .blog-content { 
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

@media only screen and (max-width: 487px) {
    .notice .auto-container {
        padding: 0 3rem;
    }
    
    #banner-blog-02 {
        background-size: cover !important;
        background-position: -3rem center !important;
    }

    #banner-blog-03 {
        background-size: cover !important;
        background-position: center !important;
    }
}

@media only screen and (min-width: 488px) and (max-width: 1200px) {
    .notice .auto-container {
        padding: 0 5rem;
    }
}