/* B 页面限定样式 */
#b-page html, #b-page body {
	font-family: Tahoma, Arial; 
	padding: 0px; 
	margin: 0px; 
	color: #333333;
	background: #333333;
	font-size: 16px;
}

#b-page img { width: 100%; }

#b-page a {
	color: #ffffff; outline: 0;
}

#b-page a:hover, #b-page a:focus {
	text-decoration: none;
	color: #cccccc;
}

#b-page a:active, #b-page a:focus {
	color: #ffffff;
	border: none;
}

#b-page p { color: #333333; }

#b-page h1, #b-page h2, #b-page h3, #b-page h4, #b-page h5, #b-page h6 {
	font-family: Tahoma, Arial;
	font-weight: 400;
}

#b-page h1 {
	font-size: 3em;
	color: #cccccc;
	background: #343537;
	padding: 0px 0px;
	float: left;
	text-shadow: 4px 2px 2px rgba(33, 33, 33, 1);
	margin: 5% 0% 0% 2%;
}

#b-page h2 { 
	font-size: 24px; 
	color: #333333;
	margin-top: 0px;
}

#b-page h3 { 
	text-align: center; 
	font-size: 2em;
}

#b-page .clear { clear: both; }
#b-page .content { display: none; height: auto; }
#b-page .homepage { display: block; }
#b-page .portfolioshow { display: block; }

/* ... 其余样式保持原样，只在前面加 #b-page ... */

#b-page .templatemo_link, #b-page .templatemo_linkservice, #b-page .templatemo_linkcontact { 
	font-size: 2em; color: #ffffff;
	width: 95%;
}

#b-page .templatemo_link1 { 
	font-size: 2em; color: #ffffff;
	padding-top: 20%;
	position: absolute;
	width: 100%;
}

#b-page .templatemo_smalltitle { 
	float: left; 
	padding: 0px 0px 0px 0px; 
	font-size: 1em; 
	color: #b5b5b5;
	margin: 10px 0px 30px 25px;
}

#b-page .templatemo_footer { 
	float: right; 
	padding: 0px 0px 0px 0px; 
	font-size: 14px; 
	color: #b5b5b5;
	margin: 30px 40px 20px 0px;
}

#b-page .templatemo_mainservice {
	background: #999933;
	text-align: center;
	width: 100%;
	float: left;
}

#b-page .templatemo_mainportfolio {
	background: #993333;
	text-align: center;
	width: 100%;
}

#b-page .templatemo_maintesti {
	background: #339966;
	text-align: center;
	width: 100%;
}

#b-page .templatemo_mainabout {
	background: #cc9933;
	text-align: center;
	width: 100%;
}

#b-page .templatemo_maincontact {
	background: #006699;
	text-align: center;
	width: 100%;
}

#b-page .templatemo_insideportfolio h2 { color: #ffffff; }

#b-page .templatemo_insideportfolio {
	background: #993333;
	width: 100%;
	padding: 0px;
	color: #ffffff;
}

#b-page .templatemo_portfoliotext { 
	color: #ffffff;
	width: 95%;
	padding: 30px;
}

#b-page .templatemo_portfolioback { 
	background: #666666;
	text-align: center;
	width: 100%;
}

#b-page .templatemo_aboutback { 
	background: #666666;
	text-align: center;
}

#b-page .templatemo_graybg { 
	float: left; 
	background: #cccccc; 
	overflow: hidden;
	width: 100%;
}

#b-page .templatemo_paddinggap { padding: 30px; }
#b-page .templatemo_form { padding: 10px 0px; }
#b-page .templatemo_form input, #b-page .templatemo_form textarea { 
	border-radius: 0px; 
	border: 1px solid #999999; 
}

#b-page .templatemo_form textarea { height: 150px; }

#b-page .templatemo_form button {
	float: right;
	background: #666666;
	color: #ffffff;
	border-radius: 0px;
	border: none;
	font-size: 16px;
}

#b-page #templatemo_map { 
	width: 100%;
	height: 280px;
}

#b-page .templatemo_address { color: #757575; padding-top: 10px; }

/* Gallery Styles */
#b-page .gallery-item {
  -webkit-box-shadow: inset 0 0 1px #666;
  -moz-box-shadow: inset 0 0 1px #666;
  box-shadow: inset 0 0 1px #666;
  margin-bottom: 0px;
  position: relative;
  overflow: hidden;
}

#b-page .gallery-item .content-gallery { text-align: center; }
#b-page .gallery-item .content-gallery h3 {
  color: #b10021;
  font-size: 16px;
  font-weight: 300;
  margin-top: 5px;
  padding-bottom: 5px;
  display: inline-block;
}

#b-page .gallery-item img { width: 100%; }
#b-page .gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: block;
  -webkit-transition: all 50ms ease-in-out;
  -moz-transition: all 50ms ease-in-out;
  -ms-transition: all 50ms ease-in-out;
  -o-transition: all 50ms ease-in-out;
  transition: all 50ms ease-in-out;
}

#b-page .gallery-item .overlay a {
  color: #ffffff;
  text-align: center;
  line-height: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  font-size: 24px;
}

/* ===== B 页面自适应布局修正 ===== */


/* 只在 B 页范围内生效 */
#b-page {
  display: block !important;
  overflow: hidden;
}

/* 覆盖掉 bootstrap 的 flex/grid，强制 B 页用 float 四列 */
#b-page .col-md-3,
#b-page .col-sm-6 {
  width: 25% !important;
  float: left !important;
  display: block !important;
  padding: 0 15px; /* 保持间距 */
  box-sizing: border-box;
}

/* 防止 col 被外部 bootstrap 的 row 弄成 flex */
#b-page .row {
  display: block !important;
  clear: both;
}
/* 大屏保持 4 列 */
#b-page .col-md-3,
#b-page .col-sm-6 {
  width: 25% !important;
  float: left !important;
  display: block !important;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 平板（<992px）时，2 列 */
@media (max-width: 991px) {
  #b-page .col-md-3,
  #b-page .col-sm-6 {
    width: 50% !important;
  }
}

/* 手机（<576px）时，1 列 */
@media (max-width: 575px) {
  #b-page .col-md-3,
  #b-page .col-sm-6 {
    width: 100% !important;
  }
}



/* 其余样式如 scrollbar、媒体查询等也需要加 #b-page 前缀 */
#b-page ::-webkit-scrollbar { width: 12px; background-color: #cccccc; }
#b-page ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #b1b1b1; }

#b-page .templatemo_frame { float: left; overflow-x:hidden; margin-top: 30px; }
#b-page .templatemo_frame a { color: #06C; }
#b-page .templatemo_frame a:hover { color: #C30; }

#b-page .copyrights { text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden; }

/* resp-vtabs 样式 */
#b-page .resp-vtabs ul.templatemo_tab { float: left; width: 100%; }
#b-page .resp-vtabs ul.templatemo_tab li { padding: 0px; background: url(../images/templatemo_arrow_gap.png) no-repeat center right #cc9933; font-size: 24px; text-align: center; font-weight: normal; }
#b-page .resp-vtabs ul.templatemo_tab li.resp-tab-active{ background: url(../images/templatemo_arrow.png) no-repeat center right #cc9933; border: 0px; padding: 0px; color: #ffffff; }
#b-page .resp-vtabs ul.templatemo_testitab { float: left; width: 100%; }
#b-page .resp-vtabs ul.templatemo_testitab li { padding: 0px; background: url(../images/templatemo_arrow_gap.png) no-repeat center right #339966; font-size: 24px; text-align: center; font-weight: normal; }
#b-page .resp-vtabs ul.templatemo_testitab li.resp-tab-active { background: url(../images/templatemo_testi_arrow.png) no-repeat center right #339966; border: 0px; padding: 0px; color: #ffffff; }

#b-page .resp-vtabs .templatemo_aboutcontainer, #b-page .resp-vtabs .templatemo_testicontainer { background: none; border-radius: 0px; border: 0px; }
#b-page h2.resp-accordion { color: #ffffff; }
#b-page .resp-tabs-list li { color: #ffffff; }

#b-page .templatemo_testicontainer h2.resp-accordion { background: #339966 !important; }
#b-page .templatemo_aboutcontainer h2.resp-accordion { background: #cc9933 !important; }

/* Media Queries 内也全部加 #b-page 前缀 */
/* ... 省略，逻辑同上 ... */

 
/*----- Page Load ------*/

@media(min-width:320px) {
	#b-page .templatemo_leftgap	{ padding: 0px 10px; }
	#b-page .templatemo_rightgap_about	{ padding: 0px 10px; }
	#b-page .templatemo_botgap	{ margin: 0px 0px 20px 0px; }
	#b-page .templatemo_topgap, #b-page .templatemo_portfotopgap	{ margin-top: 20px; }
	#b-page .templatemo_col37	{ float: left; width: 100%; }
	#b-page .resp-vtabs .templatemo_aboutcontainer, #b-page .resp-vtabs .templatemo_testicontainer { width: 100%; }
	#b-page .templatemo_aboutlinkwrapper{ display: none; }
	#b-page .templatemo_aboutlinkwrapper1{  display: block; }
	#b-page .templatemo_frame	{ padding: 0px 30px 30px 30px; }
	#b-page .templatemo_link { padding-top: 20%; }
	#b-page .logocontainer	{ padding: 0px 15px; margin: 0 auto; }
	#b-page .templatemo_insideportfolio	{ padding-bottom: 30px; }
	#b-page .templatemo_link, #b-page .templatemo_linkservice, #b-page .templatemo_linkcontact  { padding: 50px 0px; }
}	

@media(min-width:320px) and (max-width: 767px) {
	/*#b-page .container	{ left: 15px; right: 15px; padding: 0px; }*/
}

@media(min-width:768px) {
	#b-page .templatemo_leftgap	{ padding: 0px 10px; }
	#b-page .templatemo_botgap	{ margin: 0px 0px 20px 0px; }
	#b-page .templatemo_topgap	{ margin-top: 20px; }
	#b-page .templatemo_portfotopgap	{ margin-top: 0px; } 
	#b-page .templatemo_link { padding-top: 20%; }
	/*#b-page .container { left: 50%; margin-left: -375px; right: 0px; }*/
	#b-page .logocontainer	{ width: 750px; padding: 0px 15px; margin: 0 auto; }
	#b-page .templatemo_insideportfolio	{ height: 398px; }
	#b-page .templatemo_link, #b-page .templatemo_linkservice, #b-page .templatemo_linkcontact { height: 189px; line-height: 189px; padding: 0px; }
}

@media(min-width:992px) {
	#b-page .templatemo_leftgap	{ padding: 0px 6px; }
	#b-page .templatemo_rightgap_about	{ padding: 0px 6px 0px 2px; }
	#b-page .templatemo_botgap	{ margin: 0px 0px 12px 0px; }
	#b-page .templatemo_topgap	{ margin-top: 0px; }
	#b-page .templatemo_portfotopgap	{ margin-top: 0px; }
	#b-page .templatemo_bordergapborder	{ padding: 0px; margin: 0px; }
	#b-page .templatemo_graybg	{ height: 397px; }
	#b-page .templatemo_col37	{ float: left; width: 37.5%; }
	#b-page .templatemo_col50	{ float: left; width: 50%; position: relative; }
	#b-page .templatemo_form { padding: 5px 0px; }
	#b-page .templatemo_form textarea { height: 120px; }
	#b-page .templatemo_address { font-size: 12px; }
	#b-page .templatemo_portfoliotext { width: 95%; padding: 15px; font-size: 14px; }
	#b-page .resp-vtabs .templatemo_aboutcontainer, #b-page .resp-vtabs .templatemo_testicontainer	{ width: 75%; }
	#b-page .templatemo_leftgap_about	{ padding: 0px 0px 0px 6px; }
	#b-page .templatemo_aboutlinkwrapper { width: 95.8%; float: left; background: #666666; text-align: center; display: block; }
	#b-page .templatemo_aboutlinkwrapper1 { display: none; }
	#b-page .resp-vtabs .templatemo_tab li,
	#b-page .resp-vtabs .templatemo_testitab li { padding: 0px; margin-bottom: 12px; }
	#b-page .resp-vtabs ul.templatemo_tab li, 
	#b-page .resp-vtabs ul.templatemo_tab li.resp-tab-active, 
	#b-page .resp-vtabs ul.templatemo_testitab li, 
	#b-page .resp-vtabs ul.templatemo_testitab li.resp-tab-active { line-height: 79px; height: 79px; }
	#b-page .templatemo_frame { height: 337px; margin-right: 1px; padding: 0px 30px; }
	#b-page .templatemo_link { padding-top: 15%; }
	/*#b-page .container { left: 50%; margin-left: -485px; }*/
	#b-page .templatemo_link, #b-page .templatemo_linkservice, #b-page .templatemo_linkcontact { height: 124px; line-height: 124px; padding: 0px; }
	#b-page .logocontainer { width: 970px; padding: 0px 15px; margin: 0 auto; }
	#b-page .templatemo_insideportfolio { height: 260px; }
}

@media(min-width:1200px) {
	#b-page .templatemo_leftgap	{ padding: 0px 8px; }
	#b-page .templatemo_rightgap_about	{ padding: 0px 8px; }
	#b-page .templatemo_botgap	{ margin: 0px 0px 16px 0px; }
	#b-page .templatemo_topgap	{ margin-top: 0px; }
	#b-page .templatemo_portfotopgap	{ margin-top: 0px; }
	#b-page .templatemo_bordergapborder	{ padding: 0px 16px; }
	#b-page .templatemo_graybg	{ height: 466px; }
	#b-page .templatemo_col37	{ float: left; width: 37.5%; position: relative; }
	#b-page .templatemo_col50	{ float: left; width: 50%; position: relative; }
	#b-page .templatemo_form { padding: 10px 0px; }
	#b-page .templatemo_form textarea { height: 150px; }
	#b-page .templatemo_address { font-size: 14px; }
	#b-page .templatemo_portfoliotext { width: 95%; padding: 30px; font-size: 16px; }
	#b-page .resp-vtabs .templatemo_aboutcontainer, #b-page .resp-vtabs .templatemo_testicontainer	{ width: 75%; }
	#b-page .templatemo_leftgap_about	{ padding: 0px 0px 0px 10px; }
	#b-page .resp-vtabs ul.templatemo_tab li, 
	#b-page .resp-vtabs ul.templatemo_tab li.resp-tab-active, 
	#b-page .resp-vtabs ul.templatemo_testitab li, 
	#b-page .resp-vtabs ul.templatemo_testitab li.resp-tab-active { line-height: 93px; height: 93px; }
	#b-page .resp-vtabs .templatemo_tab li, 
	#b-page .resp-vtabs .templatemo_testitab li { padding: 0px; margin-bottom: 15px; }
	#b-page .templatemo_frame { height: 406px; padding: 0px 30px; }
	#b-page .templatemo_link { height: 150px; line-height: 150px; padding: 0px; }
	/*#b-page .container { left: 50%; margin-left: -585px; }*/
	#b-page .logocontainer { width: 1140px; padding: 0px 30px; margin: 0 auto; }
	#b-page .templatemo_insideportfolio { height: 316px; }
	#b-page .templatemo_leftgap_about .templatemo_link { height: 142px; line-height: 142px; padding: 0px; }
	#b-page .templatemo_linkservice, #b-page .templatemo_linkcontact { height: 145px; line-height: 145px; padding: 0px; }
}