@charset "utf-8";

/* visible */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.header {visibility:visible;}
.footer {visibility:visible;}

/* header */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.co_name
{
	width:100%;
	height:60px;
	background:#FFF;
	position:relative;
}

.co_name .name
{
	line-height:60px;
	color:#336;
	font-size:20px;
	padding-left:7px;
}

.co_name .name a
{
	display:block;
	width:330px;
	height:60px;
	text-indent:-5000px;
}

.co_name .Breadcrumb
{
	position:absolute;
	right:0;
	top:25px;
	color:#999;
	font-size:12px;
}

.co_name .Breadcrumb a
{
	color:#999;
	font-size:12px;
	text-decoration:underline;
}

.co_name .Breadcrumb img {vertical-align:middle;}

/* index mainpic */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.mainpic
{
	position:relative;
	overflow:hidden;
	width:100%;
	height:400px;
}

.mainpic li .title
{
	width:100%;
	height:99%;
	position:absolute;
	z-index:11;
	margin:1px 0;
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;
}

.mainpic li .title .wrap
{
	height:100%;
}

.mainpic li
{
	position:absolute;
	width:100%;
	height:400px;
	left:0;
	top:0;
}

.mainpic li .bg
{
	width:100%;
	height:100%;
	background-size:cover;
	position:absolute;
	z-index:10;
}

/* index menu */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

ul.index_menu
{
	padding:65px;
	width:100%;
	height:70px;
}

ul.index_menu li
{
	list-style-type:none;
	float:left;
}

ul.index_menu li a
{
	display:block;
	width:139px;
	height:70px;
	line-height:18px;
	margin-left:20px;
	padding-left:85px;
	font-size:13px;
	color:#333;
	text-decoration:none;
}

ul.index_menu li a b {font-size:20px;}

/* index product */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.title_line
{
	clear:both;
	width:100%;
	height:30px;
	font-size:20px;
	text-align:center;
	font-weight:bold;
	margin-bottom:35px;
}

.title_line span
{
	background:#FFF;
	padding:2px 10px;
}

.title_more
{
	height:50px;
	width:100%;
	text-align:right;
}

.title_more a
{
	color:#FFF;
	padding:5px;
	border-radius:5px;
	text-decoration:none;
}

.boxs {height:400px;}

.boxs .box
{
	width:300px;
	float:left;
}

.boxs .box .pic
{
	padding-bottom:10px;
}

.boxs .box .pic img
{
	width:300px;
}

.boxs .box .name
{
	font-size:16px;
	line-height:30px;
	padding-left:10px;
	padding-top:10px;
}

.boxs .box .price
{
	font-size:16px;
	color:#666;
	line-height:30px;
	padding-left:10px;
	padding-bottom:10px;
}

.boxs .box .btn a
{
	display:block;
	color:#FFF;
	text-decoration:none;
	width:100%;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:16px;
	color:#FFF;
}

.boxs .box1 , .boxs .box2 {margin-right:40px;}

/* page template */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.page {margin-top:30px;}

.page .menu
{
	width:150px;
	min-height:350px;
	padding-right:20px;
	float:left;
}

.page .menu li
{
	border-bottom:1px solid #CCC;
}

.page .menu li a
{
	display:block;
	height:48px;
	width:110px;
	font-size:16px;
	color:#333;
	line-height:48px;
	text-decoration:none;
	padding-left:40px;
}

.page .menu li a:hover {color:#000;font-weight:bold;}

.page .menu li.on a
{
	color:#FFF;
}

.page .content
{
	min-height:350px;
	margin-left:170px;
	padding-left:20px;
	position:relative;
}

.page .content h3
{
	font-size:30px;
	color:#000;
	line-height:30px;
}

.page .content .text
{
	padding-left:60px;
	padding-top:40px;
}

.page .content .text h4
{
	font-size:30px;
	line-height:35px;
	padding-bottom:10px;
}

.page .content .text p
{
	font-size:15px;
	color:#333;
	line-height:25px;
	padding:15px 0;
}

/* page culture */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.page .content .culture_subttl
{
	color:#000;
	font-size:26px;
	font-weight:bold;
	margin-top:50px;
	padding-left:20px;
}

.page .content .culture_text
{
	font-size:16px;
	line-height:25px;
	color:#666;
	margin-left:20px;
	margin-top:15px;
}

.page .content .history li.no-vLine
{
	background:0;
}

.page .content .history .circle
{
	float:left;
	width:30px;
	height:26px;
	margin-right:5px;
}

.page .content .history .date
{
	float:left;
	font-size:18px;
	line-height:26px;
	color:#8dc8e8;
}

.page .content .history p
{
	color:#666;
	font-size:16px;
}

.page .content .culture_photo_box
{
	position:absolute;
	top:0;
	right:0;
	width:400px;
	height:310px;
	border:1px solid #999;
	overflow:hidden;
}

.page .content .culture_photo_box ul.photo
{
	position:absolute;
	left:0;
	width:3250px;
	height:310px;
}

.page .content .culture_photo_box ul.photo li
{
	float:left;
	margin:0;
	padding:0;
}

.page .content .culture_photo_box ul.photo li img
{
	border:5px solid #FFF;
}

.page .content .culture_photo_circle
{
	position:absolute;
	top:325px;
	right:5px;
	width:350px;
	height:10px;
}

.page .content .culture_photo_circle li
{
	display:block;
	float:left;
	width:10px;
	height:10px;
	padding:10px;
	background:url(../img/circle_off.gif) no-repeat center center;
	margin-right:10px;
	cursor:pointer;
}

.page .content .culture_photo_circle li.on
{
	background:url(../img/circle_on.gif) no-repeat center center;
}

.page .content .culture_photo_circle li:nth-child(5)
{
	margin:0;
}

/* page products */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.page .content .pic {margin:15px 0;}

.page .content .title_line {margin:0;}

.page .content .boxs .box
{
	width:250px;
}

.page .content .boxs .box .pic img
{
	width:250px;
}

.page .content .boxs .box1 , .page .content .boxs .box2 {margin-right:15px;}

/* page product slider show */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.product_photo_box
{
	float:left;
	width:330px;
}

.product_photo_box .big_pic
{
	width:330px;
	margin-bottom:10px;
	padding:2px;
}

.product_photo_box .big_pic img
{
	width:330px;
	height:auto;
}

.product_photo_box .small_pic
{
	display:block;
	min-height:250px;
	min-width: 335px;
}

.product_photo_box .small_pic li
{
	display:inline-block;
}

.product_photo_box .small_pic img
{
	width:100px;
	border:1px solid #d2d2d2;
	margin-right:5px;
}

/* page product detail */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.page .content .detail
{
	min-height:500px;
	margin-left:360px;
}

.page .content .detail h3
{
	font-size:22px;
	font-weight:bold;
	line-height:25px;
}

.page .content .detail h3 span
{
	font-size:18px;
	color:#a7a7a7;
}

.page .content .detail .list
{
	margin:10px 0;
}

.page .content .detail .list li
{
	color:#666;
	font-size:1px;
	line-height:25px;
	padding-left:30px;
}

.page .content .detail h4
{
	font-size:16px;
}

.page .content .detail p
{
	font-size:13px;
	color:#666;
	line-height:23px;
	margin:10px 0;
}

/* page contact us */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

.page .content .googleMap
{
	margin:20px 0 30px 0;
}

.page .content .contactList ul
{
	height:50px;
}

.page .content .contactList li
{
	height:40px;
	line-height:40px;
	float:left;
	padding-left:50px;
	font-size:15px;
	color:#333;
}



/* @media for RWD */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

@media (max-width: 980px)
{

	.mainpic , .mainpic li
	{
		height:350px;
	}

	.mainpic li .title
	{
		text-align:center;
		height:346px;
	}

	.mainpic li .title img
	{
		position:static !important;
		width:60%;
		margin-top:130px;
	}

	ul.index_menu
	{
		padding:30px 65px;
	}

	ul.index_menu li
	{
		width:49%;
		margin:10px 0;
	}

	.boxs
	{
		width:780px;
		margin:0 auto;
	}

	.boxs .box
	{
		width:250px;
	}

	.boxs .box .pic img
	{
		width:250px;
	}

	.boxs .box1 , .boxs .box2 {margin-right:15px;}

	.page .menu
	{
		padding-right:5px;
	}

	.page .content
	{
		margin-left:155px;
		padding-left:5px;
	}

	.page .content .text
	{
		padding:40px 0 0 50px;
	}

}

@media (max-width: 779px)
{
	.co_name 
	{
		height:90px;
	}

	.co_name .Breadcrumb
	{
		position:static;
		padding-left:5px;		
	}

	.mainpic , .mainpic li
	{
		height:300px;
	}

	.mainpic li .title
	{
		height:296px;
	}

	.mainpic li .title img
	{
		margin-top:120px;
	}

	ul.index_menu
	{
		padding:30px;
	}

	.boxs
	{
		width:95%;
		height:auto;
	}

	.boxs .box , .page .content .boxs .box
	{
		width:100%;
		float:none;
		margin-bottom:20px;
		border:1px solid #CCC;
	}

	.boxs .box .pic
	{
		width:90%;
		margin:0 auto;
		text-align:center;
		padding:5px;
	}

	.boxs .box .pic img , .page .content .boxs .box .pic img
	{
		width:auto;
	}

	.boxs .box .name , .boxs .box .price
	{
		width:90%;
		margin:0 auto;
	}

	.boxs .box .btn
	{
		width:90%;
		margin:0 auto;
		margin-bottom:20px;
	}

	.boxs .box1 , .boxs .box2 {margin-right:0;}

	.page .menu
	{
		float:none;
		width:100%;
		min-height:50px;
		height:50px;
		margin-bottom:20px;
	}

	.page .menu ul li
	{
		float:left;
		width:20%;
	}

	.page .menu li a
	{
		width:100%;
		background: #FFF url(../img/left_menu_icon1.gif) left center no-repeat;
		padding-left:30px;	
	}

	.page .menu li.on a {
		color: #FFF;
		background: #8dc8e8 url(../img/left_menu_icon2.gif) left center no-repeat;
	}

	.page .content
	{
		margin-left:0;
	}

	.page .content .text
	{
		padding:20px 10px;
	}

	.page .content .text.introduce , .page .content .text.tenet
	{
		background:0 !important;
	}

	.page .content .text.introduce br
	{
		display:none;
	}

	.page .content .text.introduce .mobile_show img ,
	.page .content .text.tenet .mobile_show img
	{
		max-width:100%;
	}

	.page .content .text.tenet ul
	{
		margin-top:0 !important;
	}

	.page .content .culture_photo_box
	{
		position:relative;
		margin:10px auto;
	}

	.page .content .culture_photo_circle
	{
		position:static;
		margin:5px auto;
		width:400px;
	}

	.page .content .culture_photo_circle li
	{
		padding:10px 30px;
	}

	.page .content .culture_text br
	{
		display:none;
	}

	.page .content .pic img
	{
		max-width:100%;
	}

	.product_photo_box
	{
		float:none;
		width:100%;
		margin-bottom:20px;
	}

	.product_photo_box .big_pic
	{
		margin:10px auto;
	}

	.product_photo_box .small_pic
	{
		text-align:center;
		min-height:100px;
	}

	.page .content .detail
	{
		width:95%;
		margin:0 auto;
	}

	.page .content .googleMap iframe
	{
		width:100%;
	}

	.page .content .contactList ul
	{
		height:auto;
	}

	.page .content .contactList li
	{
		float:none;
		margin:10px 0;
	}

}

@media (max-width: 480px)
{

	.mainpic , .mainpic li
	{
		height:250px;
	}

	.mainpic li .title
	{
		height:246px;
	}

	.mainpic li .title img
	{
		width:80%;
		margin-top:100px;
	}

	ul.index_menu
	{
		padding:0;
		height:350px;
	}

	ul.index_menu li
	{
		float:none;
		width:100%;
	}

	ul.index_menu li a
	{
		width:100%;
		line-height:70px;
	}

	ul.index_menu li a b
	{
		padding-right:10px;
	}

	ul.index_menu li a br
	{
		display:none; 
	}

	.title_more {text-align:center;}
}