@media (max-width: 960px) {

    .page {
        width: 100vw;
        min-width: 320px !important;
        /* max-width: 640px; */
    }

    .line {
        display: none;
    }

    .page .wrapper {
        display: flex;
        flex-direction: row;
        /* flex-wrap: wrap; */
    }

    .page .wrapper .middle {
        order: 1;
        width: 70vw !important;
        /* margin: auto; */
    }

    .page .wrapper .left {
        display: none;
        /* width: 100%; */
    }

    .page .wrapper .right {
        order: 3;
        /* width: 100%; */
    }

    .container {
        width: 90vw;
    }

    .header {
        height: auto;
    }

    .header .top {
        display: none;
    }

    .bottom {
        width: 100vw;
    }

    #nav {
        width: 100%;
        position: static;
    }

    /* #nav ul li.hasmore .first { */
        /* font-size: 12px; */
    /* } */

    .header>* {
        position: static;
    }

    .newsheader {
        font-size: 1.5em;
    }

    .middle .news-detail div[style*="line-height"] img {
        width: 90% !important;
        height: auto !important;
        margin-left: 5%;
    }
}

@media (max-width: 640px) {
    .page {
        width: 100vw;
        min-width: 320px !important;
        /* max-width: 640px; */
    }

    .line {
        display: none;
    }

    .page .wrapper {
        display: flex;
        flex-direction: column;
    }

    .page .wrapper .middle {
        order: 1;
        width: 100% !important;
        margin: auto;
    }

    .page .wrapper .left {
        order: 2;
        width: 100%;
        display: block;
    }

    .page .wrapper .right {
        order: 3;
        width: 100%;
        ;
    }

    .container {
        width: 90vw;
    }

    .header {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: auto;
    }

    .header .top {
        display: none;
    }

    .header>* {
        position: static;
        order: 3;
    }

    .bottom {
        width: 100vw;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .bottom ul li {
        float: none;
    }

    .footer {
        height: auto;
    }

    /* .calendar { */
    /* display: none; */
    /* } */
    .date b {
        width: calc(100% - 30px);
    }

    .add2 {
        width: calc(100% - 135px);
        order: 1;
        position: relative;
        top: -27px;
        left: 135px;
        display: none;
    }

    .add2>a {
        background: #7f2613;
        display: block;
        text-align: center;
    }

    .logo {
        overflow: hidden;
        order: 0;
        height: auto;
        text-align: center;
        width: 100%;
    }

    .logo img {
        width: auto;
        height: 40px;
    }

    #nav {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: auto;
        position: static;
        order: 2;
        /* top: -35px; */
        /* left: 45px; */
        overflow: hidden;
        background: none;
    }

    #nav ul#ddmenu {
        display: none;
        margin: 0;
        border-radius: 3px;
        flex-direction: column;
        height: auto;
    }
    #ddmenu[style*="display: block"]{
        display:flex!important;
      }
    /* #nav li.hasmore { */
        /* line-height: 20px; */
    /* } */

    #nav ul li.hasmore a:hover {
        height: auto;
    }

    /* form */
    .add tr {
        display: flex;
        flex-direction: column;
    }

    .add table td:first-child {
        width: 100% !important;
        text-align: left !important;
    }

    .add input[type="text"],
    .add textarea {
        width: 100% !important;
    }

    /* search */
    .search-page>form {
        display: flex;
    }

    .search-page>form>input[type="text"] {
        max-width: 60vw;
    }

    .search-page>form>input[type="submit"] {
        width: 100%;
    }

    .bar-container {
        display: inline-block;
        cursor: pointer;
        order: 1;
        margin-top: -35px;;
    }

    .bar1,
    .bar2,
    .bar3 {
        width: 35px;
        height: 5px;
        background-color: #bb2000;
        margin: 6px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }

    .change .bar2 {
        opacity: 0;
    }

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
    }
}