@charset "utf-8";
/* CSS Document */

.bannerArea2{
	padding-top:0;
	position:relative;}

.bannerArea2 img{
	display:none !important;}

.bannerArea2 li{
	background-position:center;
	background-repeat:no-repeat;}

.bannerArea2 li a{
	display:block;
	width:100%;
	height:100%;}

.bannerArea2 .bx-wrapper .bx-pager, 
.bannerArea2 .bx-wrapper .bx-controls-auto{
	z-index:100;}
	
.bannerArea2 .bx-wrapper .bx-controls-direction a{
	width:70px;
	height:70px;
	margin-top:-35px;
	
	-webkit-transform:none;
	-moz-transform:none;
	-o-transform:none;
	transform:none;}

.bannerArea2 .bx-wrapper .bx-prev{
	background:url(../images/bx_arrow_prev.png) no-repeat;
	left:20px;
	opacity:0.4;
	transition:all 0.4s ease;}
.bannerArea2 .bx-wrapper .bx-next{
	background:url(../images/bx_arrow_next.png) no-repeat;
	right:20px;
	opacity:0.4;
	transition:all 0.4s ease;}
	
.bannerArea2 .bx-wrapper .bx-prev:hover{
	opacity:1;
	left:30px;}
.bannerArea2 .bx-wrapper .bx-next:hover{
	opacity:1;
	right:30px;
	background:url(../images/bx_arrow_next.png) no-repeat;}

@media screen and (max-width:1300px){
	.bannerArea2 li{
		background:none;
		height:auto !important;}
	
	.bannerArea2 img{
		display:block !important;}
	
	.bannerArea2 a.scrollDown{
		display:none;}
}

.bannerArea2 .marqueeArea{
	background:rgba(84, 69, 64, 0.8);
	position:absolute;
	left:0;
	bottom:0;
	z-index:99;}

.mainArea{
	padding:0;}


h2.enTitle{
	margin-bottom:30px;
	color:#362d2a;}

h2.enTitle em{
	font-family: 'Dosis', sans-serif;
	font-size:36px;
	font-weight:normal;}

h2.enTitle strong{
	margin-left:15px;
	font-size:18px;
	letter-spacing:5px;
	font-weight:normal;
	
	background:url(../images/dec.png) no-repeat right top;
	padding-right:45px;
	padding-top:30px;}

/***推薦商品***/
.featureArea{
	padding:80px 0;}

.featureArea ul{
	margin:0 -12px;}

.featureArea ul li{
	padding:0 12px;}

.featureArea ul li .Img{
	position:relative;
		
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;}

.featureArea ul .Img img{
	display:block;
	width:100%;}
	
.featureArea ul li .Txt{
	margin-top: 15px;
	padding-top: 10px;
	border-top: 1px dashed #B1B1B1;}

.featureArea ul li .Txt h3{
	font-size:17px;
	font-weight:normal;}

.featureArea ul li .Txt h3 a{
	display:block;
	font-weight:normal;
	color:#1e1917;}

.featureArea ul li .Txt h3 a:hover{
	color:#8f3421;
	text-decoration:underline;}

.featureArea ul li .Txt .price{
	margin-top:10px;
	font-size:16px;
	color:#8f3421;
	font-style:italic;
	font-weight:bold;}

.featureArea ul li .Txt .price b{
	margin-left:3px;}

.featureArea ul li .Txt p{
	display:none;
	margin-top:5px;
	font-size:12px;
	color:#FFF;
	line-height:1.8;}

.featureArea .btn{
	clear:both;
	margin-top:40px;
	text-align:center;}

.featureArea .btn a{
	display:inline-block;
	padding:7px 10px 7px 20px;
	font-size:15px;
	color:#FFF;
	letter-spacing:2px;}

.featureArea .btn a i{
	margin-left:10px;
	position:relative;
	left:0;
	transition:all 0.4s ease;}

.featureArea .btn a:hover i{
	left:5px;}

.featureArea ul li .ribbon_new{
	display:block;
	background:url(../images/ribbon_new.png) no-repeat;
	width:112px;
	height:112px;
	text-indent:-9999px;
	
	position:absolute;
	top: -3px;
	left: -3px;}

.featureArea ul li .ribbon_hot{
	display:block;
	background:url(../images/ribbon_hot.png) no-repeat;
	width:112px;
	height:112px;
	text-indent:-9999px;
	
	position:absolute;
	top: -3px;
	left: -3px;}

/*活動快訊*/
.linkArea{}

.linkArea .wrap{
	padding:80px 0;
	border-top:1px dashed #66524b;;}

.linkArea ul{
	margin:0 -10px;}

.linkArea ul li{}

.linkArea ul li .Img{
	overflow:hidden;}

.linkArea ul li .Img img{
	display:block;
	width:100%;}

.linkArea ul li .Txt{
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #B1B1B1;}

.linkArea ul li .Txt h3{
	font-size:16px;
	color:#1e1917;}

.linkArea ul li .Txt h3 strong{
	font-weight:normal;}

.linkArea ul li .Txt h3 a{
	color:#1e1917;}

.linkArea ul li .Txt h3 a:hover{
	color: #8f3421;
    text-decoration: underline;}

.linkArea ul li .Txt p{
	display:none;}

/*關於沃咖啡*/
.aboutArea{
	padding:0 10px 80px 10px;}

.aboutArea .wrap{
	position:relative;}

.aboutArea .wrap:before{
	content: "";
    width: 1px;
    height: 100%;
	border-left: 1px dashed #66524b;
    position: absolute;
    top: 0;
    left: 50%;}

.aboutBox{
	padding:0 50px 0 0;}

.aboutBox h2.enTitle strong{
	background:none;}

.aboutBox .Txt{
	font-size: 16px;
	color: #1e1917;
	line-height: 1.8;}

.aboutBox .btn{
	clear:both;
	margin-top:40px;
	text-align:right;}

.aboutBox .btn a{
	display:inline-block;
	padding:7px 10px 7px 20px;
	font-size:15px;
	color:#FFF;
	letter-spacing:2px;}

.aboutBox .btn a i{
	margin-left:10px;
	position:relative;
	left:0;
	transition:all 0.4s ease;}

.aboutBox .btn a:hover i{
	left:5px;}
.aboutBox .box{
	padding:0 0 0 50px;
	}
.aboutBox #box{
    width:46%;
	padding_left:1%;
	padding_right:1%;
	float:left;
}
.videoBox{
	padding:0 0 0 50px;}

.videoBox h2{
	margin-bottom:30px;
	font-size:18px;
	color:#362d2a;
	font-weight:normal;}

.videoBox h2 strong{
	display:inline-block;
	background:url(../images/dec.png) no-repeat left center;
	font-weight:normal;
	padding-left:45px;
	line-height:40px;}

/*tipArea*/
.tipArea{
	padding:80px 0;
	background:url(../images/bg_tip.jpg) no-repeat fixed center;
	background-size:cover;}

.tipArea h2.enTitle{
	color:#FFF;}

.tipArea h2.enTitle strong{
	background:url(../images/dec_light.png) right top no-repeat;}

.tipArea ul{
	margin:0 -20px;}

.tipArea ul li{
	padding:0 20px;}

.tipArea ul li .Img{}

.tipArea ul li .Img img{
	display:block;
	width:100%;}

.tipArea ul li .Txt{
	margin-top:15px;
	text-align:center;}

.tipArea ul li .Txt h3{
	font-size:22px;
	color:#FFF;}

.tipArea ul li .Txt h3 a{
	color:#FFF;}

.tipArea ul li .Txt h3 a b{
	font-family:Verdana, Helvetica, sans-serif, "微軟正黑體";
	font-size:28px;
	color:#CE792D;
	margin-right:5px;}

.tipArea ul li .Txt h3 a:hover{}

.tipArea ul li  .Txt p{
	margin-top:10px;
	font-size:13px;
	color:#FFF;
	line-height:1.8;}

.tipArea .btn{
	clear:both;
	margin-top:40px;
	text-align:center;}

.tipArea .btn a{
	display:inline-block;
	padding:7px 10px 7px 20px;
	font-size:15px;
	color:#FFF;
	letter-spacing:2px;}

.tipArea .btn a i{
	margin-left:10px;
	position:relative;
	left:0;
	transition:all 0.4s ease;}

.tipArea .btn a:hover i{
	left:5px;}

@media (max-width: 1160px){
	.linkArea .wrap{
		padding:80px 20px;}
}

@media (max-width: 768px){	
	.bannerArea2 .marqueeArea{
		bottom:auto;
		top:100%;}

	.linkArea ul{
		margin:0;}
	
	.linkArea ul li{
		padding:0 0 25px 0;}
	
	.aboutBox{
		padding:0 0 50px 0;}
	
	.aboutArea .wrap:before{
		display:none;}
	
	.aboutBox .btn{
		text-align:center;}
	
	.videoBox{
		padding:0;}
	
	.tipArea ul{
		text-align:center;}
		
	.tipArea ul li{
		width: 33.33%;
		float: none;
		padding-bottom:25px;
		display: inline-block;
		vertical-align: top;}
}

@media (max-width: 640px){	
	h2.enTitle em{
		font-size:25px;}
	
	h2.enTitle strong{
		font-size:16px;
		letter-spacing:0;
		margin-left:5px;}

	.featureArea ul{
		margin:0;}
	
	.featureArea ul li.col-3{
		width:100%;
		padding:0 0 20px 0;}
}

@media (max-width: 480px){
	.tipArea ul li{
		width: 70%;
		float: none;
		padding-bottom:25px;
		display: inline-block;
		vertical-align: top;}
}