/* ========================================
   Mobile Responsive Styles
   Breakpoint: 768px
   ======================================== */

/* Hamburger button - hidden on desktop */
.mobile-menu-btn {
    display: none !important;
}

@media screen and (max-width: 768px) {

    /* --- Global --- */
    .content {
        width: 100% !important;
        background-size: cover;
    }

    .layout {
        width: 100% !important;
        position: relative;
    }

    /* --- Top Header --- */
    .top-layout {
        flex-wrap: wrap;
        position: relative;
    }

    .top-layout .logo {
        margin: 15px auto 10px 15px !important;
        flex: 1;
    }

    .top-layout .logo a {
        width: 200px !important;
        height: 50px !important;
        background-size: contain !important;
    }

    .top-layout .top-right {
        display: none !important;
    }

    /* Hamburger menu button */
    .mobile-menu-btn {
        display: block !important;
        width: 40px;
        height: 40px;
        background: linear-gradient(160deg, #acdc30 30%, #3d8108 70%);
        border: none;
        border-radius: 5px;
        cursor: pointer;
        position: relative;
        margin: 15px 15px 10px 0;
        flex-shrink: 0;
    }

    .mobile-menu-btn span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        margin: 5px auto;
        border-radius: 2px;
        transition: all 0.3s;
    }

    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* --- Navigation (Mobile) --- */
    .layout .nav-layout {
        display: none !important;
        flex-direction: column;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: #3d8108;
        margin: 10px 0 0 0;
    }

    .layout .nav-layout.mobile-open {
        display: flex !important;
    }

    .layout .nav-layout .nav-box {
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .layout .nav-layout .nav-box a.link {
        font-family: "黑体";
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        line-height: 48px;
        display: block;
        text-align: center;
    }

    .layout .nav-layout .nav-box a.link.active {
        background-color: #fff;
        color: #3d8108;
    }

    .layout .nav-layout .nav-box .nav-pop {
        position: static !important;
        display: none !important;
        width: 100% !important;
        background: #2d6a00;
        z-index: 111;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .layout .nav-layout .nav-box.mobile-sub-open .nav-pop {
        display: block !important;
    }

    .layout .nav-layout .nav-box .nav-pop a {
        color: #fff;
        height: 40px;
        line-height: 40px;
        display: block;
        text-align: center;
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .layout .nav-layout .nav-box .nav-pop a:hover {
        background-color: rgba(255, 255, 255, 0.15);
    }

    /* Mobile menu item hover/active - same as PC */
    .layout .nav-layout .nav-box:hover {
        background-color: #fff;
    }

    .layout .nav-layout .nav-box:hover a.link {
        color: #3d8108;
    }

    /* --- Content Layout 1 (Carousel + Notice) --- */
    .layout .con-layout-1 {
        flex-direction: column !important;
    }

    .layout .con-layout-1 .con-left-1 {
        width: 100% !important;
        margin: 0 !important;
    }

    #album {
        height: auto !important;
        padding-left: 0 !important;
    }

    #album li img {
        width: 100% !important;
        height: auto !important;
    }

    .layout .con-layout-1 .con-left-2 {
        padding: 0 10px !important;
    }

    #notice_main {
        height: auto !important;
        max-height: 300px;
    }

    /* --- Content Layout 2 (Multi-column sections) --- */
    .layout .con-layout-2 {
        flex-direction: column !important;
    }

    .layout .con-layout-2 .con-left-2,
    .layout .con-layout-2 .con-center-2 {
        padding: 0 10px !important;
    }

    #div_content2,
    #div_content3,
    #div_content5,
    #div_content6 {
        width: 100% !important;
        background-size: cover !important;
    }

    .layout .con-layout-2 .con-left-2 .nav-con1-box {
        height: auto !important;
    }

    .layout .con-layout-2 .con-left-2 .nav-con1-box .nav-box-c1 span {
        width: auto !important;
        padding: 0 10px;
        font-size: 13px;
    }

    /* --- Scrolling Images --- */
    .wrap {
        width: 100% !important;
        height: auto !important;
        overflow: hidden;
    }

    .wrap ul li {
        width: 200px !important;
    }

    .wrap ul li img {
        width: 200px !important;
        height: auto !important;
    }

    /* --- Notice list items --- */
    .layout .con-layout-1 .con-left-2 .con-top2-list ul li .conleft1 .contit1 {
        flex-direction: column;
    }

    .layout .con-layout-1 .con-left-2 .con-top2-list ul li .conleft1 .contit1 .tit {
        width: 100% !important;
    }

    .layout .con-layout-1 .con-left-2 .con-top2-list ul li .conleft1 .contit1 .time {
        text-align: left;
        margin-top: 2px;
    }

    .layout .con-layout-2 .con-left-2 .con-top2-list ul li .conleft1 .contit1 {
        flex-direction: column;
    }

    .layout .con-layout-2 .con-left-2 .con-top2-list ul li .conleft1 .contit1 .tit {
        width: 100% !important;
    }

    .layout .con-layout-2 .con-left-2 .con-top2-list ul li .conleft1 .contit1 .time {
        text-align: left;
        margin-top: 2px;
    }

    /* --- List Page --- */
    .layout .con-layout-list {
        flex-direction: column !important;
    }

    .layout .con-layout-list .con-left-list {
        padding: 0 10px !important;
    }

    .layout .con-layout-list .con-left-list .nav-con1-box .nav-box-c1 span {
        width: auto !important;
        padding: 0 8px;
        font-size: 13px;
    }

    .layout .con-layout-list .con-left-list .nav-con1-box .nav-box-con1x .linkx {
        white-space: normal !important;
        word-break: break-all !important;
        height: auto !important;
        line-height: 1.6 !important;
        padding: 8px 0;
    }

    .layout .con-layout-list .con-left-list .nav-con1-box .nav-box-con1x .linkx img {
        display: none;
    }

    .layout .con-layout-list .con-left-list .nav-con1-box .nav-box-con1x .linkx span {
        float: none !important;
        display: block;
        margin-left: 0 !important;
        font-size: 12px;
        margin-top: 4px;
    }

    /* --- Detail Page --- */
    .layout .con-layout-list .con-left-list .newsDetail .title {
        font-size: 16px !important;
    }

    .layout .con-layout-list .con-left-list .newsDetail .richContent {
        font-size: 14px !important;
        line-height: 1.8;
    }

    .layout .con-layout-list .con-left-list .newsDetail .richContent img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Message Page --- */
    .msgSubmit .msgPanel_N {
        width: 100% !important;
        margin: 5px 0 !important;
    }

    .msgSubmit .msgPanel_N .g_itext {
        width: calc(100% - 70px) !important;
    }

    .msgSubmit .msgAddText_N .g_textarea {
        width: calc(100% - 70px) !important;
    }

    .msgSubmit .msgSAdd .msgAddText_N {
        height: auto !important;
        line-height: normal !important;
    }

    .msgSubmit .msgSAdd .msgAddButton_N .m_ibutton {
        width: 80% !important;
        min-width: auto !important;
    }

    .msgSubmit .msgCaptcha_N .g_itext {
        width: 80px !important;
    }

    /* --- Pagination --- */
    .layout .con-layout-list .con-left-list .con_page_bottom {
        margin: 15px 5px !important;
    }

    .layout .con-layout-list .con-left-list .con_page_bottom .con_prepage_button {
        margin-right: 10px !important;
    }

    .layout .con-layout-list .con-left-list .con_page_bottom .con_nextpage_button {
        margin-left: 10px !important;
    }

    /* --- Footer --- */
    .foot .foot-layout {
        width: 100% !important;
        flex-direction: column !important;
        height: auto !important;
        padding: 15px !important;
    }

    .foot .foot-layout .foot-l {
        width: 100% !important;
    }

    .foot .foot-layout .foot-l .links {
        display: flex;
        flex-direction: column;
    }

    .foot .foot-layout .foot-l .links .links-box {
        margin-left: 0 !important;
        margin-top: 5px;
    }

    .foot .foot-layout .foot-l .links .links-box a {
        display: inline-block;
        margin: 0 8px 5px 0 !important;
    }

    .foot .foot-layout .foot-l .addr,
    .foot .foot-layout .foot-l .cp,
    .foot .foot-layout .foot-l .tel,
    .foot .foot-layout .foot-l .info {
        font-size: 12px !important;
    }

    .foot .foot-layout .foot-r {
        text-align: center;
        margin-top: 10px;
    }

    .foot .foot-layout .foot-r img {
        width: 80px;
        height: 80px;
    }
}