/* ============================================================
   tocalo 主题 响应式补丁
   ------------------------------------------------------------
   问题：index.css 第 1 行用了 .container{width:1170px !important}，
        且多处模板内联 style 写死 1000px/1170px/667px，
        导致 Bootstrap2 自带的 bootstrap-responsive 完全失效，
        980px 以下会横向溢出。
   策略：本文件在所有样式之后加载，把固定宽度按断点降级为流式，
        并恢复 Bootstrap2 原生响应式的能力。
        桌面端（>=1200px）视觉保持与原站一致，不做任何改变。
   ============================================================ */

/* 兜底：任何残留溢出都不应让整页可横向拖动 */
html, body { max-width: 100%; overflow-x: hidden; }
/* Bootstrap 响应式在 <=767 给 body 加了左右 20px padding，与 container 的 padding 叠加后，
   手机上正文会被层层缩进吃掉一半宽度，这里统一收掉 */
body { padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- 桌面基准（原先由内联 style / old css 提供，迁移到此处便于统一降级） ---------- */
#footer { width: 1170px; margin: auto; color: #fff; box-sizing: border-box; }
.nav-container { width: 1170px; }
.header-main > .span12 { position: relative; }
.header-brand { float: left; }
.header-contact { float: right; text-align: right; }
.header-contact .tel { display: block; line-height: 20px; }
.header-contact .tel-num { font-size: 16px; color: #ed7418; }
.header-contact .flink-label { display: block; line-height: 20px; }
.brand-logo { float: left; width: 112px; }
.brand-logo img { width: 100%; height: auto; }
.brand-name { float: left; }
/* 顶部"设为主页/收藏/联系我们"原来靠 Bootstrap 的 .pull-right 右对齐，
   改成语义化 class 后需要显式补上 */
.topbar-links { text-align: right; }
/* 首页"主要客户/主要产品"卡片简介原本固定 70px 高，文字多时会被裁掉最后一行 */
#code .tc-gridbox .body { height: auto !important; min-height: 88px; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---------- 中屏 980~1199px：容器降到 980px，交给 Bootstrap 原生 940 栅格 ---------- */
@media (min-width: 980px) and (max-width: 1199px) {
	.container { width: 980px !important; }
	.navbar .container { width: 980px !important; }
	#footer { width: 980px !important; }
	/* 内联写死 1000px 的容器（关于我们/联系我们图片墙、内容区） */
	[style*="width:1000px"] { width: 940px !important; margin-left: auto !important; margin-right: auto !important; }
	.content, .case-content { width: 940px !important; }
	.case-content1 { width: 640px !important; margin-top: -60px !important; }
}

/* ---------- 平板及以下 <=979px：容器完全流式，Bootstrap 会把 span* 降为单列 ---------- */
@media (max-width: 979px) {
	.container {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding-left: 15px;
		padding-right: 15px;
	}
	.navbar .container { width: 100% !important; }
	#footer { width: 100% !important; box-sizing: border-box; padding: 0 15px; }

	[style*="width:1000px"], [style*="width:1170px"], [style*="width:667px"] {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.content, .case-content, .case-content1 {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* 首页"行业应用"两排圆形图的错位居中布局，改为自动换行居中：
	   两个原本分开的容器在窄屏取消自身盒子（display:contents），
	   由 .apply-wrap 统一接管，5 个圆自然排成 2/2/1，不会出现 2/1/2 的空洞行 */
	.apply-wrap { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
	.case-content, .case-content1 { display: contents !important; }
	.case-content1 { margin-top: 0 !important; }
	/* 平板区间（768~979）沿用桌面 284px 的圆会显得过大，按比例缩到 220px */
	.ih-item.circle, .ih-item.circle .img { width: 220px !important; height: 220px !important; }
	.ih-item.circle.effect1 .img { top: 8px; left: 8px; right: 0; bottom: 0; }
	.ih-item.circle.effect1 .info { top: 8px; left: 8px; right: 0; bottom: 0; }
	.ih-item.circle.effect1 .info h3 { font-size: 18px; padding: 42px 0 0; height: 84px; margin: 0 18px; }
	.ih-item.circle.effect1 .info p { font-size: 13px; margin: 0 18px; }
	.case-item { margin: 16px 12px !important; }
	.vola2 ul { height: auto !important; overflow: visible; }
	.vola2 ul li { width: 46% !important; float: left; box-sizing: border-box; }
	/* 图文表格、超宽媒体一律不撑破 */
	table { max-width: 100%; }
	iframe, embed, object { max-width: 100%; }
}

/* ---------- 顶部：Logo 区与热线区在窄屏改为堆叠居中 ---------- */
@media (max-width: 979px) {
	.header-brand, .header-contact { float: none; text-align: center; }
	.header-contact { margin-top: 10px; }
	.header-contact .tel, .header-contact .flink-label { display: inline-block; text-align: center; }
	.brand-logo, .brand-name { float: none; display: inline-block; vertical-align: middle; }
	.brand-logo { width: 88px; text-align: center; }
	.brand-name { text-align: left; font-size: 16px; line-height: 22px; }
	.header-main > .span12 > .brand { display: block; }
	/* 顶部工具条 */
	.topbar .topbar-links { text-align: right; font-size: 12px; }
	/* 导航内层容器：移除写死宽度 */
	.nav-container { width: 100% !important; }
}
@media (max-width: 480px) {
	.topbar { display: none; }
	.brand-name { font-size: 14px; }
	.brand-name span { font-size: 12px !important; }
	.header-contact .tel-num { font-size: 16px; }
	.flink-item { font-size: 12px; }
}

/* ---------- 主导航：<=979px 展开为横向滚动条 ---------- */
@media (max-width: 979px) {
	.navbar { margin-bottom: 0; }
	.navbar .navbar-inner { background: #333; padding: 0; }
	/* 关键：Bootstrap2 在 <=979 会把 .nav-collapse.collapse 压成 height:0（等汉堡按钮展开），
	   原站没有汉堡按钮，这里直接展开，改为横向滚动 */
	.nav-collapse,
	.nav-collapse.collapse { height: auto !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
	.navbar .nav {
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		margin: 0;
		width: max-content;
		min-width: 100%;
	}
	.navbar .nav > li { flex: 0 0 auto; float: none; }
	.navbar .nav > li > a {
		padding: 12px 14px !important;
		font-size: 15px;
		line-height: 1.4;
	}
	.navbar .nav > li > a br, .navbar .nav > li > a .ri { display: none; }
	#main-menu-user li.user { display: none; }
	/* 轮播：去掉给桌面补偿的负 margin，避免被裁掉左右 15px */
	.sy-box { margin: 10px 0 0 0 !important; }
}

/* ---------- 手机 <=767px：单列、缩小圆形图、表单全宽 ---------- */
@media (max-width: 767px) {
	/* 首页新闻栏原本用 top:-30px 与轮播做视觉叠压，窄屏会压住 banner，改回正常流 */
	#news { position: static !important; top: 0 !important; }
	/* 标题独占一行，避免与第一条新闻挤在同一行 */
	#news h4 { float: none !important; display: block; font-size: 17px !important; margin: 0 0 6px !important; }
	/* 新闻滚动条原本固定 20px 高只滚一行，窄屏放不下标题，改为自动高度自然换行 */
	.new_list { float: none !important; height: auto !important; overflow: visible !important; font-size: 15px !important; }
	.new_list > ul { margin-left: 0 !important; }
	.new_list li a { font-size: 15px; line-height: 22px; }
	/* 手机端只展示最近 3 条（约 132px，整条不被截断），避免首页被新闻拉得过长 */
	.new_list { max-height: 132px; overflow: hidden !important; }
	/* 客户/产品卡片：桌面靠 hover 把 .txt 从 40px 展开到 70px 叠在图上，
	   触屏没有 hover，改回正常文档流，避免文字盖住下方简介 */
	#code .tc-gridbox { position: relative; }
	#code .txt {
		position: static !important;
		height: auto !important;
		bottom: auto !important;
		padding: 8px 0 !important;
		text-align: center;
	}
	#code .txt h3 { font-size: 18px; margin: 0 0 4px; }
	#code .txt p { margin: 0; }
	/* 行业应用圆形图：手机上两列排布，避免 9 个圆纵向拉出 2000px */
	.case-content, .case-content1 { display: contents !important; }
	.case-item { float: none; margin: 8px 6px !important; }
	.ih-item.circle, .ih-item.circle .img { width: 150px !important; height: 150px !important; }
	.ih-item.circle.effect1 .img { top: 6px; left: 6px; right: 0; bottom: 0; }
	.ih-item.circle.effect1 .info { top: 6px; left: 6px; right: 0; bottom: 0; }
	.ih-item.circle.effect1 .info h3 { font-size: 16px; padding: 34px 0 0; height: 70px; margin: 0 12px; letter-spacing: 1px; }
	.ih-item.circle.effect1 .info p { font-size: 12px; margin: 0 12px; padding: 4px 2px; }
	.vola2 ul li { width: 100% !important; margin: 5px 0; }
	.ih-item.square { width: 100% !important; height: auto !important; max-width: 316px; }
	/* 卡片封面高度放开，避免窄屏被压扁 */
	.tc-gridbox .item-image img { height: auto !important; max-height: 320px; }
	/* 客户 logo：两列卡片较窄，固定 185px 高度会留下大片空白，改为紧凑高度并完整显示 */
	.row.photo .tc-gridbox .item-image { height: auto; }
	.row.photo .tc-gridbox .item-image img {
		height: auto !important;
		max-height: 96px;
		object-fit: contain !important;
		background: #fff;
	}
	.row.photo .tc-gridbox .header h3, .row.photo .tc-gridbox h3 { font-size: 14px; }
	/* 侧栏导航（关于我们/技术介绍左侧菜单）在全宽时改为横向排布 */
	.ranking ul { display: flex; flex-wrap: wrap; width: 100% !important; }
	.ranking ul li { flex: 1 1 45%; float: none !important; }
	/* 图片墙（客户 logo / 关于我们实景图）：两列排布，否则 19 个 logo 单列会拉出 5000px */
	.row.photo { display: flex; flex-wrap: wrap; justify-content: center; margin-left: 0 !important; }
	.row.photo > .span3 { float: none !important; width: 46% !important; margin: 0 2% 14px !important; }
	ul.con-img { display: flex; flex-wrap: wrap; justify-content: center; margin-left: 0 !important; }
	ul.con-img > li.span3 { float: none !important; width: 46% !important; margin: 0 2% 14px !important; }
	/* 栏目标题里的面包屑在窄屏换行显示 */
	h2.xiao { font-size: 20px; line-height: 1.4; }
	h2.xiao > span[style*="float:right"] {
		float: none !important;
		display: block;
		margin-top: 6px;
		font-size: 12px !important;
		line-height: 20px !important;
	}
	/* 表单元素全宽，防止溢出 */
	input[type="text"], input[type="tel"], input[type="email"],
	textarea, select {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		min-height: 40px;
	}
	/* 正文容器：桌面是 5px 20px + 正文 0 40px 的双层内边距，手机上合计 120px 太浪费 */
	.tc-box, .first-box { padding-left: 12px !important; padding-right: 12px !important; }
	#article_content { padding-left: 0 !important; padding-right: 0 !important; }
	#article_content p { line-height: 1.9; }
	/* 正文内的列表（产品/业绩清单）：Bootstrap 每层 ul 都有 25px 左缩进，嵌套几层就把内容顶出屏幕 */
	#article_content ul, #article_content ol {
		margin-left: 0 !important;
		padding-left: 0 !important;
		width: auto !important;
		max-width: 100% !important;
	}
	#article_content ul li, #article_content ol li {
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
		padding: 6px 8px !important;
		margin-left: 0 !important;
	}
	#article_content li > a { display: inline-block; max-width: 100%; }
	/* 清单右侧的 float:right 关键词列在窄屏改为换行显示 */
	#article_content li > span[style*="float:right"] {
		float: none !important;
		display: block;
		width: auto !important;
		font-size: 12px;
		color: #888;
		margin-top: 2px;
	}
	/* 正文图片不留白边 */
	#article_content img { max-width: 100% !important; height: auto !important; }
	/* 页脚文字缩小 */
	#footer h4 { font-size: 18px !important; line-height: 24px !important; }
	#footer span { font-size: 15px !important; }
	/* 回到顶部按钮避开屏幕边缘 */
	#backtotop { right: 12px; bottom: 24px; font-size: 38px; }
	/* 轮播翻页箭头在触屏上常显会挡图，收起 */
	.sy-controls { display: none !important; }
}

/* ---------- 超小屏 <=480px ---------- */
@media (max-width: 480px) {
	.navbar .nav > li > a { padding: 10px 12px !important; font-size: 14px; }
	.h-h2 { font-size: 22px; }
	/* 320px 级别小屏：138px + 两侧 margin 会超出内容宽，两列排不下，缩到 130px */
	.ih-item.circle, .ih-item.circle .img { width: 130px !important; height: 130px !important; }
	.ih-item.circle.effect1 .info h3 { font-size: 13px; padding: 24px 0 0; height: 52px; margin: 0 8px; }
	.case-item { margin: 6px 5px !important; }
	.ranking ul li { flex: 1 1 100%; }
	body { font-size: 14px; }
}

/* ---------- 打印 ---------- */
@media print {
	.navbar, #backtotop, #footer { display: none !important; }
}

/* 首页“公司新闻”滚动条：移动端改为自然换行，避免固定 20px 高度把文字横向裁断 */
@media (max-width: 767px) {
	#news { top: 0 !important; margin: 0 15px; }
	#news h4 { float: none !important; margin: 0 0 8px; }
	.new_list { float: none !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; margin-top: 0 !important; }
	.new_list ul { margin: 0; padding: 0; }
	.new_list li { height: auto !important; margin-bottom: 6px !important; }
	.new_list li a { display: block; white-space: normal !important; line-height: 1.5; }
}