@charset "utf-8";
/* ============================================================================
   移动端 / 平板适配 —— 全部写在独立文件里，只用 @media 覆盖
   ----------------------------------------------------------------------------
   为什么单独一个文件：stlye.css 里有 87 处 width:固定px、98 处 height:固定px，
   骨架是死宽 1200px 的桌面布局。直接去改那些数值会波及桌面端每一个页面，
   而这里所有规则都包在 @media 里，宽屏一条都不命中，桌面端零影响；
   要回滚只需删掉 comm.jsp 里引用本文件的那一行 link。

   生效前提：meta.jsp 里的 viewport meta。没有它手机会按 980px 布局再缩放，
   下面的断点永远不触发。

   断点选择：
     <=1240px  骨架从定宽 1200 改成流式（大平板横屏、小笔记本窗口）
     <=992px   内页左右分栏堆叠成单列（平板竖屏）
     <=768px   手机：导航改汉堡菜单、首页各屏改单/双列
     <=480px   小屏手机微调
   ========================================================================== */

/* ---------------------------------------------------------------------------
   汉堡按钮默认隐藏。
   必须写在所有 @media 之前：这条和手机断点里的 .nav-toggle{display:block}
   选择器权重相同（都是单个 class），同权重时靠后的规则生效。
   放到文件末尾会把手机端的 display:block 压掉，按钮点不开菜单。
   （按钮的 HTML 在 header.jsp / index.jsp 的 nav 里始终输出。）
   ------------------------------------------------------------------------- */
.nav-toggle { display: none; }

/* ---------------------------------------------------------------------------
   桌面/平板横排导航（>=769px）—— 这一段不是移动端规则，但必须放在这里
   ----------------------------------------------------------------------------
   原因：顶级栏目从 6 个变成 7 个（补上"荣誉资质"）后桌面端会溢出。
   原规则是写死宽度的横排：logo 358px + margin-right 86px = 444，
   每个导航项 117px + padding-left 9px = 126，
   6 项时 444 + 6*126 = 1200 刚好等于 .main 宽度；
   7 项要 444 + 7*126 = 1326 > 1200，第 7 项换行到第二行，
   又被 nav{overflow:hidden} 裁掉 —— 实测 1920px 视口下"荣誉资质"完全看不见，
   1200px 视口下被裁掉 2 项。

   所以改成 flex 横排：项目宽度由文字撑开、logo 允许收缩，
   以后再增减顶级栏目都不用重算像素。float 在 flex 容器里自动失效，
   不必逐条去掉原来的 float:left。 */
@media screen and (min-width: 769px) {
	nav dl.main {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	/* logo：保持 358px 基准，空间不够时才收缩，不小于 240px */
	nav dl dt {
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		min-width: 240px;
	}
	nav dl dt a { margin-right: 20px; width: auto; max-width: 358px; }
	nav dl dt a img { width: 100%; height: auto; max-height: 125px; object-fit: contain; display: block; }
	/* 导航项：宽度按文字自适应，不再写死 117px */
	nav dl dd {
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}
	nav dl dd a {
		width: auto;
		padding: 8px 12px;
		text-align: center;
		white-space: nowrap;
	}
	/* 当前项/悬停的高亮底图原本是 126x45 的固定尺寸图，
	   项目宽度变成自适应后要让它跟着拉伸，否则宽项目露出底图边缘 */
	nav dl dd:hover a, #menu dl dd.active a {
		background-size: 100% 100%;
	}
}

/* ---------------------------------------------------------------------------
   1240px 以下：骨架流式化
   .main 是全站唯一的居中容器（首页六屏 + 所有内页都用它），从 1200px 定宽
   改成 100% + 左右留白。padding 会额外增加盒子宽度，所以必须同时给
   box-sizing:border-box，否则 100%+24px 又溢出（原站没有全局 box-sizing 重置）。
   ------------------------------------------------------------------------- */
@media screen and (max-width: 1240px) {
	.main {
		width: 100%;
		max-width: 1200px;
		padding-left: 12px;
		padding-right: 12px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	/* 这几个标题块写死 1200px，跟着容器一起流式 */
	.box3 h1, .box5 h1, .box6 h1 { width: 100%; }
	/* 页脚版权条 826px 定宽 */
	footer ul li { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; }
	/* 内页正文区 860px + 左右各 30px padding，加 border-box 才不会顶出 */
	.ny_box .right, .ny_box .right .title { -webkit-box-sizing: border-box; box-sizing: border-box; }
}

/* ---------------------------------------------------------------------------
   992px 以下：内页左右分栏堆叠
   内页骨架是 .left 240px（栏目导航+联系方式）浮动 + .right 860px（正文）。
   两者相加 1100px，窄屏必然挤不下，所以取消浮动改成上下排列。
   ------------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
	/* 顶部大图 500px 太高，窄屏按比例压缩；
	   background-attachment:fixed 在 iOS Safari 上会导致背景错位甚至不显示，
	   移动端一律改回 scroll，并用 cover 保证铺满不留白。 */
	.banner {
		height: 220px;
		background-attachment: scroll;
		background-size: cover;
		background-position: center center;
	}
	.ny_box { background-attachment: scroll; background-size: cover; }

	/* 左右栏取消浮动，改单列 */
	.ny_box .left, .ny_box .right {
		float: none !important;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.ny_box .left { height: auto; margin-top: 20px; }
	.ny_box .right { margin-top: 20px; margin-bottom: 30px; padding: 0 16px 24px 16px; }
	.ny_box .right .title { width: 100%; height: auto; overflow: hidden; }

	/* 左侧栏目导航：dd 里的 a 原来是 200px 定宽 + margin-left:20px，
	   窄屏改成左右各 20px 留白的流式块 */
	.ny_box .left dl dd a { width: auto; margin-left: 20px; margin-right: 20px; }
	/* 左侧"联系方式"小块原本 float:left，单列下改成块级铺满 */
	.ny_box .left div { float: none; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.ny_box .left div em a { width: auto; margin-left: 20px; margin-right: 20px; }

	/* ---- 详情页/留言页的正文外框（关键） ----
	   detailed.jsp / detailedEx.jsp 用 <div class="w755 rightbox flol">，
	   message.jsp 用 <div class="w880 rightbox flol">。
	   .rightbox 在所有 CSS 里都没有定义，.w755 也没有自己的宽度 ——
	   这个框的宽度是 float 的 shrink-to-fit（max-content）算出来的，
	   由内部最宽的定宽子元素决定：.pageArticle 的 850px + padding-left:30px = 880px。
	   所以它在手机上稳定是 880px 宽，直接顶出屏幕。
	   而且 shrink-to-fit 容器里给子元素写 width:100% 是循环依赖（父宽取决于子、
	   子宽又取决于父），浏览器仍按 max-content 定父宽 —— 光改子元素没用，
	   必须先取消 float 并把外框自身钉成 100%。 */
	.rightbox {
		float: none !important;
		width: 100% !important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	/* .w880 和 .w755 不一样，它在 site.css:2442 有显式 width:880px（留言页用），
	   单靠上面的 .rightbox 同权重覆盖不了 width，所以这里一并放开。 */
	.w880 { width: 100% !important; -webkit-box-sizing: border-box; box-sizing: border-box; }

	/* 正文容器与标题块 860px 定宽 */
	.w755 .titl, .w755 .detbox, .w755 .gdwzlist ul { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
	/* 上一篇/下一篇 351px 两列 → 单列 */
	.w755 .gdwzlist ul li, .w755.gdwzlist ul li a { width: 100%; }

	/* 上下篇导航：850px + padding-left:30px（content-box）= 880px，
	   就是把上面那个外框撑到 880 的元凶，必须一起流式化。
	   定高 50px 在窄屏会被两行标题撑破，改 auto。 */
	.pageArticle {
		width: 100%;
		height: auto;
		padding-left: 14px;
		padding-right: 14px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.pageArticle li { width: 100%; height: auto; float: none; }

	/* 新闻列表项 833px 定宽 + 190px 定高（定高会让堆叠后的内容溢出） */
	.ny_box .right .news_list ul li { width: 100%; height: auto; overflow: hidden; padding-bottom: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.ny_box .right .news_list .zi { width: 100%; float: none; margin-top: 12px; }
	.ny_box .right .news_list .zi .sharebox { width: 100%; height: auto; }
	.ny_box .right .news_list .zi p { height: auto; max-height: 81px; }

	/* 桌面右侧悬浮客服栏在手机上会压住正文，隐藏 */
	.floatrightdiv { display: none !important; }
}

/* ---------------------------------------------------------------------------
   768px 以下：手机
   ------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* ---- 顶部导航改汉堡菜单 ----
	   桌面导航是 logo(358px) + 6~7 个 117px 的横排项，合计 1200px 以上，
	   手机放不下。这里把 nav 压到 60px 高，导航项收进一个下拉面板，
	   由 .nav-toggle 按钮切换 nav 上的 .nav-open 类来展开（JS 在 comm.jsp）。
	   nav 原本 overflow:hidden，会把展开的面板裁掉，必须改 visible。 */
	nav {
		height: 60px;
		overflow: visible;
		background-image: none;
		background-color: #7d2222;
	}
	nav dl.main { position: relative; padding-right: 56px; }
	nav dl dt a {
		width: auto;
		max-width: 190px;
		height: 60px;
		margin-right: 0;
		display: flex;
		align-items: center;
	}
	/* logo 图带 width=358 height=125 属性，必须用 CSS 覆盖掉 */
	nav dl dt a img { width: 100%; height: auto; max-height: 46px; object-fit: contain; }

	/* 汉堡按钮：桌面隐藏（见文件末尾默认规则），手机显示 */
	.nav-toggle {
		display: block;
		position: absolute;
		right: 10px;
		top: 14px;
		width: 34px;
		height: 32px;
		padding: 6px 5px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		z-index: 2;
	}
	.nav-toggle span {
		display: block;
		width: 24px;
		height: 2px;
		margin: 4px auto;
		background-color: #fff;
		transition: all 0.25s ease;
	}
	nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
	nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* 导航项：默认收起，展开时逐行显示。
	   用 display:none/block 而不是 max-height 动画，避免项数变化（6 项或 7 项）
	   时还要跟着调高度值。 */
	nav dl dd { display: none; float: none; }
	nav.nav-open dl dd {
		display: block;
		float: none;
		background-color: #7d2222;
	}
	nav.nav-open dl dd a {
		float: none;
		display: block;
		width: auto;
		height: auto;
		margin-top: 0;
		padding: 12px 16px;
		font-size: 16px;
		color: #fff;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		background-image: none;
	}
	/* 当前栏目高亮：桌面用 nav_h.png 背景图（126x45，手机上尺寸不符），改纯色 */
	nav dl dd:hover a, #menu dl dd.active a {
		background-image: none;
		background-color: #5d1717;
		color: #fff;
	}
	/* 展开面板整体定位在 nav 下方，铺满屏宽 */
	nav.nav-open dl {
		position: static;
	}
	nav.nav-open dl dd {
		position: relative;
	}

	#dowebok { margin-top: 60px; }

	/* ---- fullPage 整屏滚动在手机上关闭 ----
	   fullPage 2.5.4 的 responsive 选项（index.jsp 里已设为 768）会在窄屏
	   自动 setAutoScrolling(false)、隐藏圆点导航，并给容器加 .fp-responsive。
	   但 section 的 height 是 JS 按视口高写成内联样式的，内容一多就会被截，
	   所以这里强制改成按内容撑开。fp-tableCell 的 table-cell 垂直居中同理要拆掉。 */
	.fp-responsive .fp-section,
	.fp-responsive .fp-section.fp-table {
		height: auto !important;
		min-height: 0 !important;
		display: block !important;
	}
	.fp-responsive .fp-tableCell {
		display: block !important;
		height: auto !important;
		vertical-align: top;
	}
	#fp-nav { display: none !important; }

	/* 各屏背景图：桌面是 1920 宽的整幅图，手机上按宽度铺满即可，
	   否则只能看到左上角一小块 */
	.box2, .box3, .box4, .box5, .box6 {
		background-size: cover;
		background-position: center center;
	}
	.section { padding: 28px 0; }

	/* ---- box1 首屏 banner ---- */
	.box1 .slide { background-size: cover !important; background-position: center center !important; }

	/* ---- box2 关于我们 ----
	   桌面 .left 434px + .right 490px 左右分栏，且 .main 有 margin-top:-170px
	   把自己顶到上一屏的背景里；手机没有整屏滚动，负边距会把内容顶出屏幕。 */
	.box2 .main { height: auto; margin-top: 0; padding: 20px 12px; }
	.box2 .left, .box2 .right {
		float: none !important;
		width: 100%;
		margin: 0 auto;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box2 .left {
		height: auto;
		background-size: 100% 100%;
		padding: 16px;
		max-width: 360px;
	}
	.box2 .left a { width: auto; height: auto; margin: 0; }
	/* 这张图的宽高是写在 HTML 内联 style 里的（style="height:360px; width:360px;"），
	   内联优先级高于样式表，必须用 !important 才能覆盖 */
	.box2 .left a img { width: 100% !important; height: auto !important; display: block; }
	.box2 .right { margin-top: 20px; }
	/* dt 里是 311x85 的标题图，按比例缩小并居中 */
	.box2 .right dt a { width: 100%; max-width: 311px; background-size: contain; background-repeat: no-repeat; background-position: center; }
	.box2 .right dd p { width: 100%; height: auto; max-height: 192px; overflow: hidden; margin-top: 18px; font-size: 15px; line-height: 28px; }
	.box2 .in_more { margin: 20px auto 0; }

	/* ---- box3 产品中心 ----
	   桌面是 6 张 185px 卡片一行（185*6+18*5=1200）。手机改 2 列，
	   用百分比宽度 + nth-child(even) 清右边距，保证两列对齐、右侧不留缝。
	   注意要覆盖桌面的 :last-child{margin-right:0}，否则奇数张时错位。 */
	.box3 h1 a { width: 100%; max-width: 300px; margin: 0 auto 10px; background-size: contain; background-repeat: no-repeat; background-position: center; }
	.box3 dl {
		width: 48%;
		height: auto;
		min-height: 250px;
		margin-right: 4%;
		margin-top: 14px;
		padding-bottom: 14px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box3 dl:nth-child(even) { margin-right: 0; }
	.box3 dl:last-child { margin-right: 4%; }
	.box3 dl:hover { margin-top: 14px; }
	.box3 dl dt a { width: 110px; height: 110px; border-width: 5px; margin: 20px auto 0; }
	.box3 dl dd a { width: 90%; font-size: 15px; margin-top: 16px; }
	.box3 dl dd P { width: 86%; height: auto; max-height: 60px; overflow: hidden; margin-top: 10px; }

	/* ---- box4 酒窖展示 ---- 桌面 .left 682px + .right 518px */
	.box4 .left, .box4 .right {
		float: none !important;
		width: 100%;
		margin-top: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box4 .left dt a { width: 100%; max-width: 300px; background-size: contain; background-repeat: no-repeat; background-position: center; }
	.box4 .left dd { width: 100%; height: auto; margin-top: 18px; padding: 18px 14px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.box4 .left dd p { width: 100%; height: auto; max-height: 170px; overflow: hidden; font-size: 15px; line-height: 30px; }
	.box4 .in_more { margin: 18px auto 0; }
	.box4 .right { margin-top: 18px; }
	/* 四张 245x245 的图 → 2 列流式；em 是 hover 蒙层，手机无 hover，直接隐藏 */
	.box4 .right a {
		width: 48%;
		height: auto;
		margin-bottom: 4%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.box4 .right a img { width: 100% !important; height: auto !important; display: block; }
	.box4 .right a em { display: none; }

	/* ---- box5 新闻资讯 ---- 桌面 .left 400px + .right 780px */
	.box5 h1 a { width: 100%; max-width: 300px; margin: 0 auto 10px; background-size: contain; background-repeat: no-repeat; background-position: center; }
	.box5 .left, .box5 .right { float: none !important; width: 100%; margin-top: 16px; }
	.box5 .left a { width: 100%; height: auto; }
	.box5 .left a img { width: 100% !important; height: auto !important; display: block; }
	.box5 .left a em { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; }
	/* 4 条新闻原本 380px 两列浮动 → 单列 */
	.box5 .right .box { width: 100%; float: none !important; margin-bottom: 16px; }
	.box5 .right .box .box1 { width: 100%; float: none; }
	.box5 .right .box .box1 div { width: 100%; height: auto; min-height: 41px; }
	.box5 .right .box .box1 dl { width: 100%; height: auto; padding: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.box5 .right .box .box1 dl dt a,
	.box5 .right .box .box1 dl dd { width: 100%; height: auto; }
	.box5 .right .box .box1 dl dd { max-height: 63px; overflow: hidden; }
	/* 左侧小圆点在单列下会挤掉标题宽度，隐藏 */
	.box5 .right .box i { display: none; }

	/* ---- box6 在线留言 / 联系我们 ---- 桌面 .left 656px + em 分割线 + .right */
	.box6 h1 a { width: 100%; max-width: 300px; margin: 0 auto 10px; background-size: contain; background-repeat: no-repeat; background-position: center; }
	.box6 .left, .box6 .right { float: none !important; width: 100%; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.box6 .right { margin-top: 20px; }
	/* 中间那根 354px 高的竖分割线在单列下没有意义 */
	.box6 em { display: none; }
	/* 表单控件：inp3 原 299px 两列、inp2 原 634px、提交按钮 654px */
	.message li, .message li.mr14 { float: none !important; width: 100%; margin-right: 0; }
	.message .message_lr .inp3,
	.message .message_lr .inp2,
	.message a {
		width: 100%;
		float: none;
		margin: 10px 0 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.message .message_lr .inp2 { height: 140px; }
	/* 二维码 224x224 属性写在 HTML 上 */
	.box6 .right dt img { width: 160px !important; height: 160px !important; }
	.box6 .right dd { font-size: 14px; word-break: break-all; }

	/* ---- 内页"在线留言"表单 ----
	   注意这是第三套表单样式：首页用 .message（小写，stlye.css），
	   message.jsp 用 .Message（大写，site.css:1023 起），两者毫无关系，
	   上面 box6 的规则一条都不命中这里。
	   溢出来源有三层：
	     1) .Message 自身 width:680px；
	     2) .message_lr 的 margin-left:90px（给左侧 float 的标签让位）；
	     3) 输入框宽度没写在 CSS 里，而是 HTML 的 size="45" / cols="70" 属性
	        算出的固有宽度（实测 318px / 457px），所以必须显式给 width:100%。
	   标签 span 用的是 class="title1"（stlye.css:182 只有 float:left），
	   而 .Message .title{width:80px} 那条选择器根本没命中过。 */
	.Message { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.Message li { width: 100%; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; }
	/* 标签改成独占一行，正下方放输入框，取消 90px 缩进 */
	.Message .title1 { float: none; display: block; width: 100%; text-align: left; margin-bottom: 4px; color: #878787; }
	.Message .message_lr { margin-left: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.Message .message_lr .inp1,
	.Message .message_lr .inp2,
	.Message .message_lr .select1 {
		float: none;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.Message .message_lr .inp2 { height: 120px; }
	/* 验证码：输入框独占一行，图片另起一行，不再与输入框并排挤在一起 */
	.Message .message_lr .yzm { display: block; margin-top: 8px; }
	.Message .message_lr .an1 { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; }
	.w250 { width: 100%; }

	/* ---- 页脚 ----
	   桌面是 position:fixed 贴底 46px 高。手机内容长，固定页脚会一直压着正文
	   （荣誉资质页就是这样压在列表上），改成随文档流排在最后。 */
	footer {
		position: static;
		height: auto;
		background-image: none;
		background-color: #5d1717;
		padding: 12px 0;
	}
	footer ul li { height: auto; line-height: 20px; font-size: 12px; }

	/* ---- 内页正文图片（关键） ----
	   桌面规则是 .w755 .detbox img{min-width:750px;max-width:750px}。
	   min-width:750px 在手机上会把每张图撑到 750px，直接顶出屏幕产生横向滚动条，
	   这是内页在手机上"错开"最主要的一条。必须把 min-width 放开、max-width 收到 100%。
	   height:auto 用 !important：正文里有 31 张图把 height 写在内联 style 上
	   （如 style="width:550px;height:390px"），内联优先级更高，不加 !important
	   宽度被压到屏宽而高度还是 390，图会横向压扁。 */
	.w755 .detbox img {
		min-width: 0 !important;
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
	}
	.w755 .detbox iframe { width: 100%; height: 240px; }
	.w755 .detbox { font-size: 15px; }
	.w755 .detbox p { text-indent: 2em; }
	/* 表格类内容（正文里有用 table 排版的文章）允许横向滚动而不是撑破布局 */
	.w755 .detbox table { max-width: 100% !important; width: auto !important; height: auto !important; }

	/* 文章标题栏：分享按钮 140px / 来源 300px+margin-left:180px / 字号 80px 三列 → 堆叠 */
	.w755 .titl h1 { font-size: 20px; line-height: 30px; }
	.w755 .titl .laizi { height: auto; }
	.w755 .titl .laizi .fx,
	.w755 .titl .laizi .fr,
	.w755 .titl .laizi .zh {
		float: none;
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
	.w755 .titl .laizi .fx { display: none; }

	/* ---- 新闻列表：缩略图与文字上下排 ----
	   .tu 是 208x156 定宽定高 + overflow:hidden，图只定了 width:100% 无高度约束。 */
	.ny_box .right .news_list .tu {
		float: none;
		width: 100%;
		height: auto;
		max-width: 320px;
		margin: 0 auto;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.ny_box .right .news_list .tu a { width: 100%; height: auto; }
	/* 等比裁切成 4:3，避免不同比例的图把行高撑得参差不齐 */
	.ny_box .right .news_list .tu a img {
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		display: block;
	}
	.ny_box .right .news_list .zi h3 a { font-size: 16px; line-height: 24px; display: block; }

	/* ---- 产品列表 266px 卡片 → 2 列 ---- */
	.ny_box .right .cp {
		width: 48%;
		height: auto;
		margin-right: 4%;
		margin-bottom: 18px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.ny_box .right .cp:nth-child(even) { margin-right: 0; }
	.m_r3 { margin-right: 4%; }
	.ny_box .right .cp dt { width: 100%; height: auto; }
	.ny_box .right .cp dt img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
	.ny_box .right .cp dd { width: 100%; margin-top: 12px; }
	.ny_box .right .cp dd:hover { margin-top: 12px; }
	.ny_box .right .cp dd a p { width: 100%; font-size: 14px; }

	/* 面包屑与栏目标题行 */
	.ny_box .right .title div { font-size: 16px; }
	.ny_box .right .title ul { float: none; clear: both; line-height: 28px; }
	.ny_box .right .title ul li span { float: none; display: inline-block; }
}

/* ---------------------------------------------------------------------------
   480px 以下：小屏手机
   产品/酒窖的两列在 360px 宽时每列不到 160px，卡片文字会挤成两行，改单列。
   ------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	.box3 dl, .box3 dl:last-child { width: 100%; margin-right: 0; min-height: 0; }
	.box3 dl dt a { width: 130px; height: 130px; }
	.box4 .right a { width: 100%; margin-bottom: 14px; }
	.ny_box .right .cp, .m_r3 { width: 100%; margin-right: 0; }
	.banner { height: 160px; }
	.w755 .titl h1 { font-size: 18px; }
	.ny_box .right { padding: 0 12px 20px 12px; }
}