@media(max-width: 1200px){
    ul.menu-nav-desktop{
        display: none;
    }
    .nav-mobile-toggler {
        display: flex;
    }
    .menu-mobile-open{
        display: block;
    }
}
@media(max-width: 992px){
    .page{
        flex-direction: column;
    }
    .page main {
        padding-right: 0;
    }
    .page aside {
        flex: 0 0 100%;
        width: 100%;
    }
    .widget .ads{
        text-align: center;
    }
    .social-media {
        justify-content: center;
    }
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .area-footer-bottom {
        text-align: center;
    }
    .area-header-top {
        flex-direction: column;
    }
    .notice-filter-box {
        flex-direction: column;
        gap: 10px;
    }
    .notice-filter-box > div {
        flex: 1;
    }
    .filter .row > div {
        margin-bottom: 10px;
    }
    .content iframe {
        height: 500px;
    }
}
@media(max-width: 767px){
    .blog-card {
        margin-right: 0 !important;
    }
    .blog-card {
        flex: 0 0 100%;
        box-sizing: border-box;
    }
    .footage-des .footage {
        margin: 0 0 10px 0;
    }
    .footage-des {
        flex-direction: column;
    }
    .sec-box {
        justify-content: center;
        flex-direction: column;
    }
    .sec-right{
        margin-bottom: 10px;
    }
    .searchbox .input-src{
        width: auto;
    }
    .search-filter {
        margin-left: 0;
    }
    .sec-box li:not(:last-child) {
        margin-right: 0;
    }
    .sec-left {
        margin-top: 10px;
    }
    .wrapper {
        padding: 0px 15px;
    }
    footer::after {
        left: -15px;
        right: -15px;
        bottom: -15px;
    }
    footer::before {
        left: -15px;
        right: -15px;
    }
}
@media(max-width: 560px){
    .logo-cap h1{
        font-size: 21px;
    }
    .logo-caption {
        margin-left: 10px;
    }
    .logo {
        flex: 0 0 55px;
        height: 55px;
    }
    .area-noticeboard {
        padding: 20px 15px 15px 40px;
    }
    .area-noticeboard.globe::after {
        width: 40px;
        height: 40px;
        background-size: 100%;
    }
}
@media(max-width: 360px){
    .searchbox .input-src {
        width: 100%;
        box-sizing: border-box;
    }
    .logo-cap h1 {
        font-size: 15px;
        -webkit-text-stroke: 1px #FFF;
    }
    .logo-cap {
        padding-left: 10px;
    }
    .blog-card .blog-thumb {
        flex: 0 0 70px;
        padding-right: 10px;
    }
    .blog-card {
        min-height: 160px;
    }
}