@charset "utf-8";
/* CSS Document */
.mainArea{
	background:#fff;
	padding:0;}
.mainArea:before{
	display:none;}



.btn{
	padding-top:30px;
	display:block;
	text-align:center;
	clear:both;}
.btn a{
	display:inline-block;
	font-family:sans-serif;
	color:#868686;
	padding:10px 44px;
	border:1px solid #868686;}
.btn a i{
	margin-left:8px;
	transition:all 0.3s ease;}
.btn a:hover i{
	margin-left:18px;}
/**最新消息**/
.newsArea{
	position:relative;}
.newsArea .newsBox{
	width:50%;
	height:480px;
	background:url(../images/news_bg.png) no-repeat;
	background-size:cover;
	padding:70px 0 50px 0;}
.newsArea .newsBox .wrap{
	width:580px;
	float:right;}
.newsBox ul{}
.newsBox ul li{
	border-bottom: 1px solid #333;
	padding:8px 5px;}
.newsBox ul li .Txt{
	width:75%;
	overflow:hidden;}
.newsBox ul li .date{
	display:inline-block;
	width:70px;
	height:70px;
	font-family: sans-serif;
	border-radius:50%;
	background:#333333;
	color:#fff;
	text-align:center;
	vertical-align:top;}
.newsBox ul li .date span{
	font-size:13px;
	font-weight:normal;
	display:block;
	padding-top:20px;}
.newsBox ul li .date span.day{
	font-size:20px;
	font-weight:bold;
	padding-top:0;
	margin-top:-4px;}
.newsBox ul li .Txt{
	padding:0 0 0 24px;
	display:inline-block;}


.newsBox h2{
	text-align:left;
	margin-bottom:10px;}
.newsBox h2 strong{
	position:relative;
	display:inline-block;
	font-family: sans-serif;
	color:#333;
	font-size:25px;
	padding:0px 36px 0 0;
	}
.newsBox h2 em{
	display:inline-block;
	font-size:18px;
	color:#868686;
	font-weight:normal;}


.newsBox ul li .Txt h3 a{
	font-size:20px;
	font-weight:normal;
	color:#333}
.newsBox ul li .Txt h3 a:hover{
	text-decoration:underline;}
.newsBox ul li .Txt p{
	margin-top:7px;
	font-size:14px;
	line-height:1.5;
	color:#666;
	height:40px;}
.newsBox ul li .Txt p a, .newsBox ul li .Txt p a:visited {
    color:#666;
	text-decoration: none;}
	
.newsBox .btn{
	padding-top:40px;}
.newsBox .btn a{
	background:#1b1c1b;
	border:1px solid #1b1c1b;
	color:#fff;}	

/*關於我們*/
.newsArea .aboutBox{
	position: absolute;
	top: -27px;
	right: 17px;
	width: 53.5%;
	background: url(../images/a_bg.png) no-repeat;
	background-size: cover;
	padding: 75px 0 50px 0;
	overflow: hidden;
}
.newsArea .aboutBox:before{
	position:absolute;
	right:0;
	bottom:53px;}
.newsArea .aboutBox .wrap{
	width:647px;
	float:left;
	padding-left:100px;
padding-right:60px;}

.aboutBox h2{
	text-align: left;
	font-size:20px;
	color:#ffffff;
	margin-bottom:80px;}
.aboutBox h2 strong{
	color:#ffffff;　
	}

.aboutBox .Txt{
	padding:0 10px;
	display:inline-block;
	font-size:16px;
	color:#fff;
	line-height:1.8;}

.aboutBox .btn{
	padding-top:80px;}
.aboutBox .btn a{
	background:#1b1c1b;
	border:1px solid #1b1c1b;
	color:#fff;}

/*推薦商品*/
.featureArea{
	background:#fff;
	padding:45px 0 85px 0;}
.featureArea ul{
	}
.featureArea ul li{
	padding:20px 0;
	position:relative;
	transition:all 0.5s ease;}
.featureArea ul li:hover{
	transform:translateY(-20px);
	-webkit-transform:translateY(-20px);
	-moz-transform:translateY(-20px);}
.featureArea ul li .Img{
	position:relative;
	overflow:hidden;
	padding:10px;
	background:#fff;}
.featureArea ul li .Img a{
	display:block;}
.featureArea ul li .Img img{
	display:block;
	width:100%;
	transition:all 0.5s ease;}
.featureArea ul li:hover .Img img{
	opacity:0.4;}
.featureArea ul li .Txt{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	left:0;
	width:100%;
	text-align:center;
	margin-top:30px;
	opacity:0;
	transition:all 0.5s ease;}
.featureArea ul li:hover .Txt{
	margin-top:0;
	opacity:1;}
.featureArea ul li .Txt h3 strong a{
	position:relative;
	display:block;
	font-size:24px;
	color:#000;
	font-weight: 300;
	font-family: sans-serif;}

.featureArea .slick-dots{
	bottom:-50px;}


.qualityArea{
	background:#fff;
	padding:80px 0 60px 0;}

.qualityArea ul {}

.qualityArea ul li{padding:5px;}

.cirl{background:#ffffff; 
	border-radius: 100%;
	width:165px;
	height:165px;
	margin:auto;
	border:1px #DCDCDC solid;
	box-shadow:2px 2px 5px rgba(220,220,220,0.8); 
   text-align: center;}
.cirl img{
	text-align: center;
	padding-top:30px;}

.qualityArea .txt{
	text-align: center; 
	padding-top:30px; 
    font-size:16px; 
	font-family: Helvetica, Arial, "sans-serif",;
	text-transform:uppercase;
}



@media (max-width: 1570px){
	.newsArea .aboutBox:before{
		right:-100px;}
}
@media (max-width: 1380px){
	.newsArea .aboutBox:before{
		right:-200px;}
}
@media (max-width: 1180px){
	.newsArea .aboutBox:before{
		display:none;}
	.newsArea .aboutBox .wrap,
	.newsArea .newsBox .wrap{
		width:100%;}
	h2{
		padding:0px 20px;}
	.featureArea ul li .Txt{
		position:static;
		top:auto;
		transform:none;
		margin-top:0;
		opacity:1;
		padding-top:10px;}
}
@media (max-width: 1075px){	
	
.bannerArea ul#banner > li .Txt{
                display:none!important;}
	
	.newsArea .newsBox,
	.newsArea .aboutBox{
		width:100%;}
	.aboutBox h2{
		margin-bottom:30px;}
	.newsArea .aboutBox{
		background:#378BC7;
		position:static;}
	.newsArea .aboutBox .wrap{
		padding:0;}
	.newsArea .aboutBox .Img,
	.newsArea .aboutBox .Txt{
		display: block;
		width: 100%;padding:0px 20px;
		text-align:left;}
	.newsArea .aboutBox .Img img{
		float:none;}
	.newsBox ul li .Txt{
		width:80%;}
	.aboutBox .btn{
		padding-top:55px;}
	
	.qualityArea .txt{
	text-align: center; 
	padding-top:30px; 
    font-size:16px; 
	height:70px;
	font-family: Helvetica, Arial, "sans-serif",;
	text-transform:uppercase;
}
	
	
}
@media (max-width: 525px){
	
	
	.newsArea .newsBox{
	height:auto;
}

	
	.featureArea{
	background:#fff;
	padding:30px 0;}
	
	.featureArea ul li .Txt h3 strong a{
	position:relative;
	display:block;
	font-size:20px;
	color:#000;
	font-weight: 300;
	font-family:sans-serif;}
	
	.featureArea .btn{display:none;}
	
	.newsArea .newsBox{
	background:url(../images/news_bg.png) no-repeat;
	padding:30px 0;}
	
	.newsArea .aboutBox{
	background:#378BC7;
	padding: 60px 0 30px 0;
	overflow: hidden;
}
	.qualityArea{
	padding:30px 0 ;}
	
	
	.cirl{
	border-radius:none;
	width:100px;
	height:100px;
	margin:auto;
	border:none;
	box-shadow:none; 
   text-align: center;}
	
	.cirl img{
	width:100%;
	padding-top:2px;}
	
	.formBox{	
	margin:15px 15px 0px 15px;}
	
	
	
	.newsBox ul li{
		padding:10px 0;}
	.newsBox ul li .Txt{
		width:100%;
		padding:20px 0 0 0;
		text-align:center;}
	.newsBox ul li .date{
		display:block;
		margin:0 auto;}
	h2{
		margin-bottom:20px;}
}
@media (max-width: 350px){
	h2{
		padding-left:0;}
	h2 strong{
		background:none;
		padding:26px 0 0 0;}
	h2 em{
		padding:0;}
}