/* ============================================================ 吉林国健妇产医院官网 —— 响应式适配样式表（移动端/平板/PC 自适应） 引入方式：在模板 内、原 CSS 之后引入： ============================================================ */ /* ---------- 基础：图片、表格、表单自适应 ---------- */ img{max-width:100%;height:auto;} table{max-width:100%;} input,select,button,textarea{max-width:100%;box-sizing:border-box;} /* 手机端底部操作条：默认（PC）隐藏，仅在 ≤767px 显示 */ #gjmBar{display:none;} /* ---------- 平板及以下：768~1199px ---------- */ @media screen and (max-width:1199px){ .main, .clearfix, .a_ry, .tc_w, .pu_line, .crumbs_con, .pub_con, .gjzc, .content, .team .str, .gjry2, .ckfw, .ck_box, .ckxm, .ksts, .ksts .ts_box1, .ksts .ts_box2, .anchor_box, .lchl, .jyyd_box, .pptd, .tsfc, .content01, .zxgh, .new_content, .new, .index_banner .flexslider{ width:96%;margin-left:auto;margin-right:auto; } /* 导航 */ .nav-main{height:auto;} .nav-logo img{max-width:60%;height:auto;margin-top:8px;} .nav .m{width:12%;} .nav h2{font-size:15px;} /* 页脚 */ .footer_left, .footer_us, .footer_right{width:31%;margin:0 1.1%;} .footer_logo img{max-width:100%;height:auto;} } /* ---------- 手机：≤767px ---------- */ @media screen and (max-width:767px){ body{font-size:13px;} /* 容器全部铺满 */ .main, .clearfix, .a_ry, .tc_w, .pu_line, .crumbs_con, .pub_con, .gjzc, .content, .team .str, .gjry2, .ckfw, .ck_box, .ckxm, .ksts, .ksts .ts_box1, .ksts .ts_box2, .anchor_box, .lchl, .jyyd_box, .pptd, .tsfc, .content01, .zxgh, .new_content, .new{ width:96%;margin-left:auto;margin-right:auto; } /* 顶部导航：logo 居中，整行铺满 */ .nav-main{height:auto;padding:0;} .nav-logo{height:auto;padding:10px 0;} .nav-logo img{width:180px;height:auto;max-width:70%;margin:5px auto 0;display:block;} .navBar{height:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;} .nav{white-space:nowrap;font-size:13px;text-align:left;} .nav .m{float:none;display:inline-block;width:auto;padding:6px 2.5%;text-align:center;} .nav h2{font-size:14px;margin:4px 0;} .nav h3{font-size:12px;} .nav .sub{position:static;display:none;width:100%;border:none;background:#faf8f4;} .nav .m:hover .sub{display:block;} .nav .sub li a{font-size:13px;padding:6px 0;height:auto;line-height:1.6;} /* 首页六大板块：见文件末尾更完整的两列规则（含字号与高度放开） */ /* 医疗团队滚动区 */ .zjgda ul li{width:200px;} .zjgda img{width:100%;height:auto;} /* 医疗团队滚动区：手机上换成原生横向 scroll-snap 原实现 #indemo{float:left;width:9999%} + jCarouselLite 动画 ul 的 left 值。 插件把 left 写成内联样式，这里用 !important 压掉后插件即变惰性， 容器交还给原生滚动，手指滑动更跟手，也不再靠裁切显示。 */ #demo{width:100% !important;overflow:hidden;} #indemo{float:none !important;width:100% !important;} #demo2{display:none !important;} .zjgda{float:none !important;width:100% !important; overflow-x:auto !important;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;padding:0 0 10px;} .zjgda ul{position:static !important;left:auto !important;top:auto !important; width:auto !important;display:flex !important;float:none !important;} .zjgda ul li{flex:0 0 62%;width:auto !important;float:none !important; scroll-snap-align:center;margin-right:10px;} .zjgda ul li img{width:100% !important;height:auto !important;} /* 插件生成的左右箭头在手机上无作用，隐藏 */ .zjgda ~ .dq_pl, .dq_pl{display:none !important;} /* 首页菜单栏目、专题：改为纵向铺满 */ .cdlm{height:auto !important;min-width:0 !important;padding:20px 0;background-size:cover;} .cdlm .dhx{height:auto !important;overflow:hidden;} .cdlm .dhx ul{overflow:hidden;} .cdlm .dhx ul li{width:48% !important;margin:1%;float:left !important; height:auto !important;min-height:150px !important;} /* 原样式 .dhx li{width:300px;height:228px;overflow:hidden} + h3{font-size:24px}， 卡片压到 48% 宽后长标题（如"高新女性健康管理中心"）会被 overflow:hidden 直接裁掉， 表现为右列文字缺字。这里必须同时放开高度与字号，只改宽度不够。 */ .cdlm .dhx ul li div{height:auto !important;padding-bottom:18px;} .cdlm .dhx ul li div h2{margin:28px auto 0 !important;} .cdlm .dhx ul li div h3{font-size:15px !important;line-height:1.4 !important; margin-top:8px !important;padding:0 6px;word-break:break-word;} /* 六大板块同理：.ldbk li{width:200px;height:401px;overflow:hidden} 两列布局下英文副标题（Gynecological services 等）会被裁 */ .ldbk{height:auto !important;padding:30px 0 !important;overflow:hidden;} .ldbk ul{overflow:hidden;} .ldbk ul li{width:48% !important;float:left !important;margin:1% !important; height:auto !important;} .ldbk ul li img{width:100% !important;height:auto !important;} .ldbk ul li div{position:absolute;left:0;top:0;width:100%;height:100%;} .ldbk ul li h3{font-size:15px !important;padding-top:14px !important;} .ldbk ul li p{font-size:11px !important;line-height:1.35 !important; padding:0 6px;word-break:break-word;} .zthd .zt_list ul li{width:96% !important;margin:2% auto !important;float:none !important;display:block;} .zthd .zt_list ul li img{width:100% !important;height:auto !important;} /* 国健动态列表 */ .new_list ul li{width:100% !important;margin-bottom:10px;} .new_list .pic img{width:100% !important;height:auto !important;} /* 正文区：左右两栏改单栏 */ .new_left{width:100%!important;float:none!important;} .new_right{width:100%!important;float:none!important;margin-top:20px;} .new_left .n_top .list_li{width:100%!important;height:auto!important;padding-bottom:10px;} .new_left .n_top .list_li img{width:96%!important;height:auto!important;margin:2%!important;float:none!important;display:block;} .new_left .n_top .list_li .n_tit, .new_left .n_top .list_li .n_text{width:92%!important;margin-left:4%!important;float:none!important;margin-top:8px;} .new_left .n_top .list_li .zx{float:right;margin:6px 4% 10px 0;} /* 文章详情 */ .last_top .last_tit{font-size:18px;line-height:1.5;} .last_time{font-size:12px;} .last_con{padding:0 2%;font-size:14px;line-height:1.8;} .last_con img{width:100%!important;height:auto!important;} /* 页脚：改为纵向堆叠 */ .footer_left, .footer_us, .footer_right{width:96%!important;float:none!important;margin:10px auto!important;text-align:center;padding-top:10px!important;} .footer_logo img{width:180px;height:auto;} #search_box{width:90%!important;float:none!important;margin:0 auto!important;padding:9px!important;} #search_box input{width:80%!important;} .footer .top{left:44%;} /* 表格：允许横向滑动 */ .bi_main{overflow-x:auto;} .bi_main table{width:auto;min-width:600px;} /* 通用内页头部 */ .public_top{padding:30px 0 15px 0!important;} .public_top h2{font-size:18px!important;} .public_top .text{width:92%!important;} .crumbs{padding:0 2%;} } /* ---------- 超小屏：≤360px ---------- */ @media screen and (max-width:360px){ .nav .m{padding:6px 2%;} .nav h2{font-size:13px;} .footer_logo img{width:150px;} } /* ============================================================ 通用收敛层（手机端） 实测：站内有 179 个选择器写死 380~1200px 宽度，32 个前台模板受影响。 此前靠 html,body{overflow-x:hidden} 把超出部分直接裁掉， 导致内页在手机上只露出左边约 40%，右侧内容静默消失（实测超出 794~1936px）。 这一层把"隐藏溢出"变成"不产生溢出"，逐页测量验证后保留。 ============================================================ */ @media screen and (max-width:767px){ *, *::before, *::after{ box-sizing:border-box; } /* 任何元素都不得比视口更宽；任何元素都不得有最小宽度撑破视口 */ body *{ max-width:100%; min-width:0 !important; } /* 例外：轮播/滚动条类容器必须保持自身宽度，否则会被压扁而失去滚动效果 （医疗团队滚动 #indemo 宽度由 JS 复制条目算出，实测达 12 万像素） */ #demo, #demo1, #indemo, .zjgda, .zjgda ul, .zjgda li, .index_banner, .flexslider, .flex-viewport, .slides, .slides li, .swiper-wrapper, .swiper-slide{ max-width:none !important; } /* 两栏/多栏浮动布局在手机上堆叠为单列 */ [class*="left"], [class*="right"], [class*="_l"], [class*="_r"], [class*="_left"], [class*="_right"]{ float:none !important; width:auto !important; max-width:100% !important; } /* 但纯装饰性/图标性的 *_l *_r 若原本靠 float 排版，堆叠后需清掉遗留外距 */ [class*="left"], [class*="right"]{ margin-left:0 !important; margin-right:0 !important; } /* 表格：改为可横向滑动，而不是被裁掉 */ table{ display:block; width:100% !important; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } table table, table thead, table tbody, table tr, table td, table th{ display:revert; } /* 绝对定位的装饰块（大图为底、hover 滑出的 em 等）不得超出视口 */ [class="em"], em, b, i{ max-width:100%; } /* 背景图区：等比缩放而不是裁切 */ div[style*="background"]{ background-size:contain !important; background-repeat:no-repeat !important; } /* ── 用 left/top 把文字推到背景图上定位的老写法 ── 例：.fk_h_tit{position:relative;left:1150px} .dcb_top{left:210px} 这类元素 max-width 管不住（超出来自 left 偏移本身），必须归回正常文档流。 */ .fk_h_tit, .fk_h_con, .dcb_top, .dcb_bottom, .wt_qit, .wt_dcb{ position:static !important; left:auto !important; top:auto !important; width:auto !important; height:auto !important; padding:10px 16px !important; color:#553515 !important; line-height:1.7 !important; } .wt_list{ width:100% !important; height:auto !important; background-size:contain !important; background-position:center top !important; padding-bottom:16px !important; } .fk_h_con{ color:#666 !important; } /* 内页标题块 .ck_title{position:relative;top:-30px;height:55px;width:184px} 靠负偏移压在装饰横线上；导航在手机上变成三行后，这个 -30px 会让标题 直接叠到导航上（实测截图如此）。归回正常流即可。 */ .ck_title{ position:static !important; top:auto !important; width:auto !important; height:auto !important; background:none !important; padding:14px 14px 4px !important; } .ck_title h2{ font-size:19px !important; } .ck_title h3{ font-size:13px !important; } /* 残余小溢出（实测 3px / 21px）：固定宽 + 左边距/浮动叠加所致 */ .gy_con{ width:auto !important; margin-left:0 !important; float:none !important; height:auto !important; padding:10px 14px !important; } .gy_con .gy_text{ width:auto !important; } .text{ width:auto !important; float:none !important; padding-left:14px !important; padding-right:14px !important; height:auto !important; } .text p{ width:auto !important; float:none !important; } } @media screen and (max-width:1199px){ /* 专题页常见全宽容器 */ .banner{width:100%!important;height:auto!important;overflow:hidden;} .banner img{width:100%!important;height:auto!important;max-width:100%!important;} .banner a{width:100%!important;height:auto!important;display:block!important;} .content, .content1, .content2, .main_bg{max-width:100%;overflow:hidden;} } @media screen and (max-width:767px){ /* 专题页正文容器收窄居中 */ .content, .content1, .content2{width:96%!important;margin-left:auto!important;margin-right:auto!important;} .content img, .content1 img, .content2 img{width:100%!important;height:auto!important;} .title, .tit{width:96%!important;margin:0 auto!important;} /* 专题页大表格允许横向滚动 */ table{display:block;overflow-x:auto;} /* 专题页两/多列块改纵向堆叠 */ .left, .right, .fl, .fr{width:100%!important;float:none!important;display:block;} } /* ============================================================ 专题页（zt/）固定宽度容器兜底 这些页面各自 CSS 里写死 .w1200{width:1200px}， 共用头尾 swt/head.js 里还有内联 width:1300px， 上一版适配漏了这两类，导致手机端整页 1300px 横向溢出。 ============================================================ */ @media screen and (max-width:1199px){ .w1200, .w1300, .w1220, .w1000{ width:96%!important;max-width:100%!important;box-sizing:border-box; } .w1200 .left, .w1200 .right{width:100%!important;float:none!important;} /* 列表页/搜索页/团队页的文章摘要块与分页条（common.min.css 写死 500px） 用多级选择器压过第三方注入的同权重 !important 规则 */ body div.nr, body .new_left .n_top .list_li .nr, body div.jump, body .new_left .n_top .list_li .jump{ width:100%!important;max-width:100%!important;min-width:0!important;float:none!important;box-sizing:border-box; } .nr, .jump{width:auto!important;max-width:100%!important;float:none!important;box-sizing:border-box;} .n_text, .dgyb p{width:auto!important;max-width:100%!important;float:none!important;} /* 平板段禁止整页横向溢出 */ html, body{overflow-x:hidden;} } @media screen and (max-width:767px){ /* 内联写死宽度的容器用属性选择器强制放开（覆盖 style 属性） */ div[style*="width:1300px"], div[style*="width: 1300px"], div[style*="width:1200px"]{ width:100%!important;max-width:100%!important;box-sizing:border-box; } .w1200{width:100%!important;padding:0 2%;} /* 专题页头部 logo 与右侧咨询按钮改为上下排列 */ #logo{float:none!important;text-align:center;margin:12px auto!important;} #logo img{max-width:60%;height:auto;} /* 整页禁止横向滚动，避免右侧留白 */ html, body{overflow-x:hidden;} /* ───── 主导航：一级 3 列排布 + 二级点击展开 ───── 原样式 .nav-main{height:214px} .navBar{height:74px} .nav .m{width:133.3px} 9 个一级栏目正好 1200px，手机上必然被切；且父项 a 是 href="javascript:;"， 二级菜单只靠 :hover 显示 —— 触屏没有 hover，等于二级栏目在手机上完全无法进入。 */ /* 导航：三列 × 三行。宽度必须逐级钉死到视口， 否则 .nav 会被上层 .clearfix{width:96%} 之类的规则带偏， 第三列超出屏幕（此前靠 .navBar{overflow:hidden} 裁掉，属于静默丢内容）。 */ .nav-main{height:auto!important;width:100%!important;max-width:100%!important;} .navBar{height:auto!important;overflow:visible!important;width:100%!important;max-width:100%!important;padding:0;} .nav::after{content:"";display:block;clear:both;} ul.nav, .nav.clearfix, .nav{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; white-space:normal !important; overflow:hidden; } .nav .m{float:left !important;display:block !important; width:33.3333% !important; max-width:33.3333% !important; box-sizing:border-box !important;padding:0 !important;border-bottom:1px solid #f2efe9;} .nav{white-space:normal!important;} .nav .m{float:left;width:33.3333%!important;display:block;box-sizing:border-box; padding:2px 0 8px;border-bottom:1px solid #f2efe9;} .nav h2{font-size:14px!important;margin:6px 0 2px!important;} .nav h3{font-size:11px!important;line-height:1.2!important;} .nav .m.open{background:#f7f2e9;} .nav .m.open h2 a{color:#553515;} /* 二级面板：整行下拉，不再依赖 hover。 必须用 position:fixed —— 原样式 .nav .m{position:relative}， 若用 absolute+width:100%，面板会被限制在单个栏目的 128px 宽度里（实测如此）。 top 由脚本按导航条实际底边设置。 */ .nav .sub{display:none;position:fixed;left:0;right:0;width:100%!important; border:0;border-top:1px solid #e6e4e3;border-bottom:1px solid #e6e4e3;background:#fff; box-shadow:0 8px 14px rgba(0,0,0,.10);padding:6px 0 10px;text-align:left;z-index:80;} .nav .m.open .sub{display:block;} .nav .sub li{float:left;width:50%;padding:0 16px;box-sizing:border-box;margin:0;} .nav .sub li a{height:auto!important;line-height:1.6!important;padding:8px 0!important; font-size:15px!important;font-weight:normal;border-bottom:1px dashed #eee;text-align:left;} .nav .sub li a img{left:0!important;} /* ───── 遗留 PC 浮动栏 #divR：手机端暂时隐藏 ───── 原样式 #divR{width:55px;height:398px;top:230px;right:8px} 是 PC 竖排条， 在手机上会压住正文与分页按钮（用户截图已证实）。 改底部横条试过两种方案都不稳：这些按钮是雪碧图图标（无文字）， 用 flex 重排后 background-position 会错位、按钮成对重复显示。 因此先在手机上隐藏，等接入商务通时按新代码做一个正经的移动底栏。 注意：这是"隐藏"不是"修好"，转换入口在手机上暂时缺失。 */ #divR{display:none !important;} .swt_slider{display:none !important;} /* 手机端底部操作条（由 swt.js 输出，复用 #divR 里现成可用的链接） */ #gjmBar{display:flex !important;position:fixed;left:0;right:0;bottom:0;z-index:9999; height:50px;background:#563516;box-shadow:0 -2px 8px rgba(0,0,0,.18);} #gjmBar a{flex:1 1 0;display:block;text-align:center;line-height:50px;height:50px; color:#fff !important;font-size:14px !important;text-decoration:none; border-right:1px solid rgba(255,255,255,.14);} #gjmBar a:last-child{border-right:0;} #gjmBar a:active{background:#6b4526;} /* 给底栏让位，避免遮住页尾版权 */ body{padding-bottom:52px !important;} /* 导航：手机上隐藏英文副标题，让中文有足够呼吸空间， 并把三列的右边缘留白补上（实测第三列文字贴着屏幕右边缘） */ .nav h3, .nav .m > span{display:none !important;} .nav .m{padding:0 !important;} .nav .m h2{margin:0 !important;padding:9px 4px !important;} .nav .m h2 a{display:block !important;} .navBar{padding:0 4px;} /* ───── 商务通/智齿 中间弹窗：原写死 515px + margin-left:-290px， 在手机上比屏幕还宽且偏移出屏，会整屏盖住内容 ───── */ .swt_tc{width:92%!important;left:4%!important;right:4%!important; top:auto!important;bottom:64px!important;margin:0!important; max-height:62vh;overflow-y:auto;} .swt_tc_cen, .swt_tc .swt_tc_cen{width:100%!important;height:auto!important;} .swt_tc_cen img{width:100%!important;height:auto!important;} .swt_mid{width:100%!important;padding:0 0 8px!important;} .swt_mid span{float:none!important;width:auto!important;background:none!important; padding:8px 12px 2px!important;font-size:16px!important;} .swt_mid p{float:none!important;width:100%!important;padding:0 12px 8px!important;} .swt_head{height:48px!important;} .swt_head p{line-height:48px!important;font-size:15px!important;text-indent:58px!important; background-position:200px center!important;} .swt_head:before{width:38px!important;height:38px!important;top:5px!important;left:10px!important;} }