/*大于1024分辨率*/
@media only screen and (min-width:1024px) {
    #warp {
        width: 1002px;
        height: 136px;
        margin: auto;
    }
    #warp img{
        width:1002px;
        height:136px; }

    #nav {
        width: 1002px;
        margin: auto;
        clear: both;
    }

    #menu1 {
        background: #000;
        background-image: url(../menu_bg.jpg);
        text-transform: capitalize;
    }

    #menu1 ul li a {
        color: #ffffff;
        font-size: 16px;
        float: left;
    }

    #menu1 ul li a:hover {
        color: #fff;
        background-image: url(../bg_over.jpg);
        background-color: #ff0000;
        font-size: 16px;
    }

    .menu {
        height: 36px;
        display: block;
        padding: 0px;
        width: 1003px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        float: left;
    }

    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu ul li { /* width and height of the menu items */
        float: left;
        overflow: hidden;
        position: relative;
        line-height: 36px;
        width: 120px;
        text-align: center;
        margin-left: auto;
    }

    .menu ul li a { /* must be postioned relative  */
        position: relative;
        display: block;
        width: 100%;
        height: 36px;
        font-family: "微软雅黑", "宋体";
        font-size: 16px;
        text-decoration: none;
        cursor: pointer;
        overflow: hidden;
    }

    .menu ul li a span { /* all layers will be absolute positioned */
        position: absolute;
        left: 0;
        width: 120px;
        float: left;
    }

    .menu ul li a span.out {
        top: 0px;
    }

    .menu ul li a span.over, .menu ul li a span.bg { /* hide */
        top: -36px;
    }
}

/*大于993分辨率*/

@media only screen and (min-width:993px) and (max-width:1023px){
    #warp {
        width: 993px;
        margin: auto;
    }
    #warp img{
        width:993px;
        height:136px;
        margin: auto;
    }
    #nav {
        width: 993px;
        margin: auto;
        clear: both;
    }

    #menu1 {
        width: 993px;
        margin: auto;
        background: #000;
        background-image: url(../menu_bg.jpg);
        text-transform: capitalize;
    }

    #menu1 ul li a {
        color: #ffffff;
        font-size: 16px;
        float: left;
    }

    #menu1 ul li a:hover {
        color: #fff;
        background-image: url(../bg_over.jpg);
        background-color: #ff0000;
        font-size: 16px;
    }

    .menu {
        height: 36px;
        display: block;
        padding: 0px;
        width: 993px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        float: left;
    }

    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu ul li { /* width and height of the menu items */
        float: left;
        overflow: hidden;
        position: relative;
        line-height: 36px;
        width: 120px;
        text-align: center;
        margin-left: auto;
    }

    .menu ul li a { /* must be postioned relative  */
        position: relative;
        display: block;
        width: 100%;
        height: 36px;
        font-family: "微软雅黑", "宋体";
        font-size: 16px;
        text-decoration: none;
        cursor: pointer;
        background-size:120px ;
    }

    .menu ul li a span { /* all layers will be absolute positioned */
        position: absolute;
        left: 0;
        width: 120px;
        float: left;
    }

    .menu ul li a span.out {
        top: 0px;
    }

    .menu ul li a span.over, .menu ul li a span.bg { /* hide */
        top: -36px;
    }
}

/*大于768-992分辨率*/
@media only screen and (min-width:768px) and (max-width:992px){
    #warp {
        width: 768px;
        margin: auto;
    }
    #warp img{
        width:768px;
        height:136px;
        margin: auto;
    }
    #nav {
        width: 768px;
        margin: auto;
        clear: both;
    }

    #menu1 {
        width: 768px;
        margin: auto;
        background: #000;
        background-image: url(../menu_bg.jpg);
        background-size:90px 100%;
        text-transform: capitalize;
    }

    #menu1 ul li a {
        color: #ffffff;
        font-size: 13px;
        float: left;
    }

    #menu1 ul li a:hover {
        color: #fff;
        background-image: url(../bg_over.jpg);
        background-color: #ff0000;
        font-size: 13px;
    }

    .menu {
        height: 36px;
        display: block;
        padding: 0px;
        width: 768px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        float: left;
    }

    .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .menu ul li { /* width and height of the menu items */
        float: left;
        overflow: hidden;
        position: relative;
        line-height: 36px;
        width: 90px;
        text-align: center;
        margin-left: auto;
    }

    .menu ul li a { /* must be postioned relative  */
        position: relative;
        display: block;
        width: 100%;
        height: 36px;
        font-family: "微软雅黑", "宋体";
        font-size: 14px;
        text-decoration: none;
        cursor: pointer;
        background-size:90px ;
    }

    .menu ul li a span { /* all layers will be absolute positioned */
        position: absolute;
        left: 0;
        width: 90px;
        float: left;
    }

    .menu ul li a span.out {
        top: 0px;
    }

    .menu ul li a span.over, .menu ul li a span.bg { /* hide */
        top: -36px;
    }
}
/*大于390-767分辨率*/
@media only screen and (min-width:390px) and (max-width:767px){
    #warp{width:100%;margin:auto;}
    #warp img{width: 100%;height: 30vw;}
    #nav{margin:auto;clear:both;width: 100%; height: auto; overflow: auto;}
    .menu {	display: block;	padding: 0px;	margin-top: 0px;text-transform: capitalize;	margin-right: auto;margin-left: auto;}
    .menu ul {	list-style: none;padding: 0;margin: 0;display: grid;grid-template-columns: repeat(4, 1fr);gap: 1px;}
    .menu ul li {
        /* width and height of the menu items */
        float: left;
        overflow: hidden;
        position: relative;
        display: inline-block;
        text-align: center;
        margin-left: auto;
        height: 7vw;
        width: 100%;
    }
    .menu ul li a {
        /* must be postioned relative  */
        position: relative;
        display: block;
        width: 100%;
        height: 7vw;
        line-height: 7vw;
        font-size: 2.9vw;
        font-weight: bold;
        font-family: "微软雅黑", "宋体";
        text-decoration: none;
        cursor: pointer;
        color: #ffffff;
        float: left;
        background-size: 100% 100%;
        background-image: url(../menu_bg.jpg);
        background-repeat: repeat-x;
    }
    .menu ul li a span {
        /* all layers will be absolute positioned */
        position: absolute;
        left: 0;
        float: left;
        width: 100%;
    }
    .menu ul li a span.out {
        top: 0px;
    }
    .menu ul li a span.over,.menu ul li a span.bg {
        /* hide */
        top: -36px;
    }
    #menu1 {
        width: 100%;
        float:none !important;
        background: #000;
        background-image:url("../menu_bg.jpg"); background-repeat: repeat-x;
        background-size: 100% 100%;
    }

    #menu1 ul li a span.over { color: #fff; background-image: url(../bg_over.jpg);background-size: 100% 100%; background-color: #ff0000; font-size: 2.5vw; }
}
/*大于50-390分辨率*/
@media only screen and (min-width:50px) and (max-width:390px){
        #warp{width:100%;margin:auto;}
        #warp img{width: 100%;height: 30vw;}
        #nav{margin:auto;clear:both;width: 100%; height: auto; overflow:hidden;}
        .menu {	display: block;padding: 0px;margin-top: 0px;text-transform: capitalize;margin-right: auto;margin-left: auto;}
        .menu ul {	list-style: none;padding: 0;margin: 0;display: grid;grid-template-columns: repeat(3, 1fr);/* 关键：5列改2列，适配小屏 */gap: 2px;/* 增加间隙，避免挤塞 */}
        .menu ul li {
            float: none !important;/* 关键：删除冗余浮动，解决grid冲突 */
            overflow: hidden;
            position: relative;
            display: inline-block;
            text-align: center;
            margin-left: auto;
            height: 10vw;/* 加高菜单项，适配文字 */
            width: 100%;
            padding: 0 3px;/* 增加内边距，文字不贴边 */
            word-break: break-all;/* 关键：英文强制换行，不截断 */
        }
        .menu ul li a {
            position: relative;
            display: block;
            width: 100%;
            height: 10vw;/* 同步加高链接，与菜单项一致 */
            line-height: 10vw;/* 同步行高，文字垂直居中 */
            font-size: max(2.8vw, 13px);/* 关键：最小12px，避免文字过小 */
            font-weight: bold;
            font-family: "微软雅黑", "宋体";
            text-decoration: none;
            cursor: pointer;
            color: #ffffff;
            float: none !important;/* 关键：删除冗余浮动 */
            background-size: 100% 100%;
            background-image: url(../menu_bg.jpg);
            background-repeat: repeat-x;
        }
        .menu ul li a span {
            position: absolute;
            left: 0;
            float: none !important;/* 关键：删除冗余浮动 */
            width: 100%;
            height: 100%;/* 让span占满链接，文字居中更稳定 */
            line-height: 10vw;/* 同步行高 */
        }
        .menu ul li a span.out {
            top: 0px;
        }
        .menu ul li a span.over,.menu ul li a span.bg {
            top: -10vw;/* 关键：同步隐藏值为菜单项高度，避免悬浮层错位 */
        }
        #menu1 {
            width: 100%;
            float:none !important;
            background: #000;
            background-image:url("../menu_bg.jpg");
            background-repeat: repeat-x;
            background-size: 100% 100%;
            padding: 0 2px;/* 菜单容器加内边距，整体更规整 */
        }
        #menu1 ul li a span.over {
            color: #fff;
            background-image: url(../bg_over.jpg);
            background-size: 100% 100%;
            background-color: #ff0000;
            font-size: max(2.5vw, 12px);/* 悬浮层字体同步最小12px */
            height: 10vw;/* 悬浮层加高，无错位 */
            line-height: 10vw;
        }
}