/* =============================================================== * 手机端专用样式 m_style.css（仿 njxzt.cn /m/css/css.css） * 主色 #007bdf / 辅色 #004366，rem 字号体系，纯白极简。 * 仅用于 m_*.ejs 模板，独立于 PC 端。 * =============================================================== */ html { font-size: 20px; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); } body { margin: 0; min-width: 320px; background: #fff; color: #333; font-size: 0.7rem; line-height: 1.42857143; font-family: "Microsoft Yahei", PingFangSC-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x: hidden; padding-bottom: 2.75rem; } * { box-sizing: border-box; } a { color: #301f14; text-decoration: none; } ul { margin: 0; list-style: none; padding: 0; } img { max-width: 100%; height: auto; border: none; vertical-align: middle; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .container { padding: 0 0.5rem; } /* ---------- 顶部蓝色 header（对齐原站 .header-inner）---------- */ .header-inner { background-color: #007bdf; color: #fff; line-height: 1.5rem; padding: 0.5rem 0; } .header-inner .container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header-inner .logo { color: #fff; font-size: 0.7rem; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; } .header-inner .logo img { max-height: 1.3rem; display: inline-block; vertical-align: middle; } .header-inner .menu { width: 0.9rem; height: 0.7rem; border-top: 0.1rem solid #fff; border-bottom: 0.1rem solid #fff; display: inline-block; position: relative; } .header-inner .menu:after { content: ''; height: 0.1rem; background-color: #fff; width: 100%; display: block; margin-top: 0.3rem; } /* 内页返回箭头 */ .header-inner .goback { display: inline-block; width: 0.5rem; height: 0.5rem; border-left: solid 0.1rem #fff; border-top: solid 0.1rem #fff; transform: rotate(-45deg); margin-right: 0.4rem; } .header-inner .title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; font-size: 0.8rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.5rem; } /* ---------- 轮播图（对齐原站 .swiper）---------- */ .swiper { margin: 0; position: relative; overflow: hidden; } .swiper .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; transition: transform .5s ease; } .swiper .swiper-slide { min-width: 100%; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; } .swiper .swiper-slide a { display: block; } .swiper .swiper-slide img { display: block; width: 100%; height: auto; } .swiper .swiper-pagination { position: absolute; bottom: 0.4rem; left: 0; right: 0; text-align: center; z-index: 5; } .swiper .swiper-pagination span { display: inline-block; width: 0.3rem; height: 0.3rem; background: rgba(255,255,255,.5); border-radius: 50%; margin: 0 0.1rem; } .swiper .swiper-pagination span.active { background: #fff; } /* ---------- 区块 ---------- */ .section { padding: 0.75rem 0; } .section-title { text-align: center; font-size: 0.9rem; margin-bottom: 0.75rem; } .section-title span { color: #333; } .section-title small { display: block; font-size: 0.55rem; color: #999; margin-top: 0.15rem; text-transform: uppercase; } /* ---------- 产品/案例 两列网格（对齐原站 .case）---------- */ .case ul li, .grid-2 li { float: left; display: inline; width: 50%; text-align: center; margin-bottom: 0.5rem; } .case ul li a, .grid-2 li a { color: #666; display: block; padding: 0 0.2rem; } .case ul li .m-img, .grid-2 li .m-img { width: 100%; height: 4.6rem; line-height: 4.6rem; border: 0.05rem solid #eee; background: #f7f9fc; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .case ul li .m-img img, .grid-2 li .m-img img { width: 100%; height: 100%; object-fit: cover; } .case ul li p, .grid-2 li p { margin: 0.25rem 0 0; overflow: hidden; width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: 0.65rem; } /* ---------- 新闻：标签切换（对齐原站 .news-btn）---------- */ .news-btn { margin-bottom: 0.5rem; } .news-btn li { float: left; width: 50%; } .news-btn li span { display: block; margin: 0 0.15rem 0.15rem; line-height: 1.7rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #fff; color: #333; border-radius: 0.15rem; border: 1px solid #ddd; font-size: 0.7rem; } .news-btn li.cur span { background-color: #007bdf; color: #fff; border-color: #007bdf; } .news-con ul { display: none; } .news-con ul.on { display: block; } .news-con .list-2 li { border-bottom: 1px solid #eee; } .news-con .list-2 li a { display: block; padding: 0.5rem 0; } .news-con .list-2 li .text span { color: #999; font-size: 0.55rem; float: right; } .news-con .list-2 li .text h4 { margin: 0; font-size: 0.7rem; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-con .list-2 li .text p { color: #999; margin: 0.25rem 0 0; font-size: 0.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* ---------- 关于我们（对齐原站 .aboutus）---------- */ .aboutus { color: #666; background: #f7f9fc; } .aboutus .contents h3 { font-size: 0.8rem; color: #004366; margin: 0.5rem 0; } .aboutus .contents p { font-size: 0.65rem; line-height: 1.6; color: #666; margin: 0.25rem 0; } .aboutus .more { text-align: center; margin-top: 0.75rem; } .aboutus .more a { display: inline-block; width: 5rem; height: 1.5rem; line-height: 1.5rem; background: #007bdf; color: #fff; font-size: 0.65rem; border-radius: 0.15rem; } /* ---------- 优势 ---------- */ .adv-list { padding: 0 0.25rem; } .adv-list .item { background: #fff; border: 1px solid #eee; border-radius: 0.15rem; padding: 0.6rem; margin-bottom: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .adv-list .item .ico { width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; -ms-flex-negative: 0; flex-shrink: 0; } .adv-list .item .ico img { width: 1.5rem; height: 1.5rem; } .adv-list .item .txt h4 { margin: 0 0 0.2rem; font-size: 0.75rem; color: #004366; } .adv-list .item .txt h4 em { font-style: normal; font-size: 0.65rem; color: #007bdf; margin-left: 0.3rem; } .adv-list .item .txt p { margin: 0.15rem 0 0; font-size: 0.6rem; color: #888; line-height: 1.5; } /* ---------- CTA 广告条 ---------- */ .adv-cta { background: #004366; color: #fff; text-align: center; padding: 0.9rem 0.5rem; } .adv-cta h2 { font-size: 0.9rem; margin: 0 0 0.25rem; } .adv-cta p { font-size: 0.6rem; color: rgba(255,255,255,.85); margin: 0 0 0.5rem; } .adv-cta a { display: inline-block; padding: 0.3rem 1.2rem; background: #007bdf; color: #fff; font-size: 0.65rem; border-radius: 1rem; } /* ---------- 友情链接 ---------- */ .links { padding: 0.5rem; line-height: 1.6; background: #f7f9fc; } .links span { font-size: 0.6rem; color: #888; } .links a { font-size: 0.6rem; color: #666; margin-right: 0.5rem; } /* ---------- 页脚 ---------- */ .footer { text-align: center; color: #999; font-size: 0.6rem; padding: 0.5rem 0; background: #fff; } .footer p { margin: 0.25rem 0; } /* ---------- 底部固定工具栏（对齐原站 .footer-fix）---------- */ .footer-fix { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #007bdf; z-index: 100; } .footer-fix ul li { float: left; width: 25%; } .footer-fix ul li a { display: block; text-align: center; color: #fff; padding: 0.3rem 0; font-size: 0.55rem; line-height: 1; } .footer-fix ul li svg { display: block; width: 0.9rem; height: 0.9rem; margin: 0 auto 0.15rem; } /* ---------- 汉堡弹出菜单（对齐原站 #menu-xs）---------- */ .menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 200; display: none; } .menu-overlay.open { display: block; } .menu-panel { position: fixed; top: 0; right: -60%; width: 60%; height: 100%; background: #fff; z-index: 201; transition: right .3s ease; overflow-y: auto; } .menu-panel.open { right: 0; } .menu-panel .menu-head { background: #007bdf; color: #fff; padding: 0.75rem; font-size: 0.8rem; } .menu-panel .menu-head .close { float: right; font-size: 1rem; line-height: 1.2rem; } .menu-panel ul li { border-bottom: 1px solid #eee; } .menu-panel ul li a { display: block; padding: 0.65rem 0.75rem; font-size: 0.75rem; color: #333; } .menu-panel ul li a:active { background: #f1f8ff; } /* ---------- 内页通用 ---------- */ .crumbs { padding: 0.5rem; font-size: 0.6rem; color: #999; } .crumbs a { color: #007bdf; } .list-3 li { float: left; width: 50%; margin-bottom: 0.5rem; } .list-3 li a { display: block; padding: 0 0.2rem; color: #666; } .list-3 li .m-img { width: 100%; height: 4.6rem; line-height: 4.6rem; border: 0.05rem solid #eee; overflow: hidden; } .list-3 li .m-img img { width: 100%; height: 100%; object-fit: cover; } .list-3 li .text { text-align: center; font-size: 0.65rem; margin-top: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-list li { border-bottom: 1px solid #eee; } .news-list li a { display: block; padding: 0.6rem 0.5rem; } .news-list li h4 { margin: 0; font-size: 0.7rem; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-list li p { margin: 0.2rem 0 0; font-size: 0.6rem; color: #999; } .news-list li .date { font-size: 0.55rem; color: #aaa; margin-top: 0.2rem; display: block; } .detail-title { text-align: center; padding: 0.75rem 0.5rem 0.5rem; border-bottom: 1px solid #eee; } .detail-title h1 { font-size: 0.85rem; margin: 0; color: #333; } .detail-title p { margin: 0.4rem 0 0; color: #999; font-size: 0.55rem; } .detail-body { padding: 0.6rem 0.5rem; font-size: 0.7rem; line-height: 1.7; color: #555; } .detail-body img { max-width: 100%; } .jobs-list dl { border-bottom: 1px solid #eee; padding: 0.6rem 0.5rem; margin: 0; } .jobs-list dt { font-size: 0.75rem; color: #004366; margin-bottom: 0.25rem; } .jobs-list dd { margin: 0; font-size: 0.65rem; color: #666; line-height: 1.6; } .contact-box { padding: 0.75rem 0.5rem; } .contact-box .tel-big { display: block; background: #007bdf; color: #fff; text-align: center; font-size: 0.9rem; line-height: 2.2rem; border-radius: 0.15rem; margin-bottom: 0.75rem; } .contact-box .info { font-size: 0.65rem; color: #666; line-height: 1.8; } .contact-box .info strong { color: #333; }