/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*,*:before,*:after{
	box-sizing: border-box;
	-webkit-box-sizing: border-box;

}

img{
	max-width: 100%;
	height: auto;
}

/* my css */

body{
	font-family: Arial, "微軟正黑體";
 }

 .wrap{
	 margin: 0 auto;
	 max-width: 1024px;
	 overflow: hidden;
 }

 /* =========================== header ================================== */
.header{
	position: relative;
}
 .menu_desktop{
	 display: flex;
	 justify-content: space-between;
	 background: rgba(0, 0, 0, 0.75);
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;


 }

 .menu_nav{
	 display: flex;
	 align-items: center;
	 margin-right: 48px;
 }

 .menu_desktop h1{
	 padding: 16px 30px;
 }
 .menu_desktop h1 a{
	 background-image: url(../img/logo_w@svg.svg);
	 width: 120px;
	 height: 24px;
	 text-indent: 101%;
	 overflow: hidden;
	 white-space: nowrap;
	 display: block;
 }

 .menu_nav > li a{
	 display: block;
	 text-decoration: none;
	 color:#fff;
	 margin-left: 30px;
	 border-bottom: 2px solid transparent;
	 padding-bottom: 17px;
	 padding-top: 17px;
	 width: 80px;
	 text-align: center;


 }

 .menu_nav  li a:hover , .menu_nav  li a.active{
	border-bottom: 2px solid #fff;
	color:#a53800;
 }


 .dropdown-open{
	 display: none;
	 position: absolute;
	 z-index: 100;
 }

 .dropdown-open a{
	background: #3D1101;
	display: block;
	width: 100%;
	color:#fff;

}


 .hamburger_btn{
	 display: none;
 }

.menu_mobile{
	display: none;
}

 @media (max-width : 568px){
	 .menu_nav{
		 display: none;
	 }

	 .hamburger_btn{
		 display: block;
		 margin-top: 10px;
		 margin-left: 10px;
	 }

	 .menu_mobile{
		display: block;
		background: #3D1101;
		position: absolute;
		top: 0;
		left: -270;
		width: 270px;
		height: 420px;
		overflow: hidden;
		-webkit-transform: translateX(-270px);
		transform: translateX(-270px);
		transition: all .3s; 
		text-align: center;
   }
 }


.close_btn{
	text-decoration: none;
	color: #FFFFCC;
	font-size: 24px;
	display: block;
	text-align: center;
	width: 100%;
	height: 30px;
	padding:10px;
	margin-bottom: 10px;
}

.menu_aside_index i , .index_tag i {
	margin-left: 10px;
}


/*增加 class open 觸發選單*/
.open .menu_desktop{
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}
.open .menu_mobile{
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}

.menu_aside > li{
	border-bottom: 1px dashed #fff;
}


.menu_aside li a{
	display: block;
	width: 100%;
	text-decoration: none;
	color:#fff;
	padding: 10px;
}

.menu_aside li a:hover{
	background: #a53800;
}

.menu_aside_child{
	display: none;
	background:#641101;
}

.menu_aside_child li{
	border-top: 1px dashed #fff;
}



/* banner */
 .banner{
	 background-image: url(../img/header_desktop.png);
	 background-position: center center;
	 background-repeat: no-repeat;
	 height: 420px;

	 display: flex;
	 justify-content: center;
	 align-items: center;
 }

 .banner-rect{
    background: rgba(0, 0, 0, 0.35);
	color:#fff;
	text-align: center;
	padding:20px;
 }

 .banner h3{
	 font-size: 36px;
	 margin-bottom: 20px;
	 line-height: 1.5;
 }
 .banner p {
	 margin-bottom: 5px;
	 color:rgba(255, 255, 255, 0.8); 

 }

.banner br{
	display: none;
}

 @media (max-width : 568px){
	.banner{
		background-image: url(../img/header_mobile.png);
	}

	.banner br{
		display: block;
	}
 }

  /* =========================== footer ================================== */
.footer{
	background: #efe9e7;
	display: flex;
	justify-content: space-between;
	padding: 60px 30px;
}
.footer_item{
	display: flex;
	justify-content: flex-start;
}

.footer_about{
	width: 40%;
	margin-right: 20px;
}

.footer_about h2,.footer_contact h2{ 
	font-size: 24px;
	margin-bottom: 20px;
	color: #3D1101;
}

.footer_about p{
	color: #3D1101;
	line-height: 1.2;
}

.footer_contact ul{
	list-style: disc;
	color: #3D1101;
	line-height: 1.2;
    padding-left: 20px;
}
.footer_follow{
	width: 30%;
}
.footer_follow ul{
	display: flex;
	justify-content: flex-end;
	flex-direction:row;
	margin-top: 10px;
}
.footer_follow ul li{
	margin-left: 10px;
}

@media (max-width: 568px) {
	.footer{
		display: block;
		position: relative;
	}
	.footer_item{
		display: block;
	}

	.footer_about{
		width: 98%;
		margin-bottom: 30px;
	}

	.footer_contact{
		margin-bottom: 80px;
	}
	.footer_follow{
		margin-top: 30px;
		width: 30%;
		position: absolute;
		right: 30px;
		bottom: 30px;
	}

}

 /* =========================== index  ================================== */
 /* features */
.features{
	background: #efe9e7;
	text-align: center;
	color: #3D1101;
	padding:40px 20px;

}

.features h3{
	font-size: 20px;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	margin-bottom: 40px;
}

.features h3::before{
	content: "";
	height: 1px;
	width: 50%;
	background:#979797;
	position: absolute;
	top: 50%;
	left: -50%;
}

.features h3::after{
	content: "";
	height: 1px;
	width: 50%;
	background:#979797;
	position: absolute;
	top: 50%;
	right: -50%;
}


.features ul{
	display: flex;
	justify-content: space-around;
}

.features ul li{
	padding:0 30px;
}

.features img{
	margin-bottom: 20px;
}

.features h4{
	font-size: 18px;
	margin-bottom: 20px;
}
.features p{
	text-align: left;
	line-height: 1.5;
}

@media (max-width: 568px) {
	.features h3::before{
		display: none;
	}
	.features h3::after{
		display: none;
	}
	.features ul{
		flex-direction: column;
	}

	.features ul li{
		padding:30px 30px;
	}
}

/* chef */
.chef{
	background: #3D1101;
	color: #EFE9E7 ;
	display: flex;
	align-items: center;
	padding: 20px;

}

.chef_txt{
	width: 56%;
	margin-left: 20px;
}

.chef h4{
	font-size: 20px;
    margin-bottom: 10px;
}

.chef p{
	line-height: 1.5;
	margin-bottom: 20px;
}

@media (max-width: 568px) {
	.chef{
		flex-direction: column;
	}

	.chef_txt{
		width: 98%;
		margin-top: 20px;
	}
}

/* thoughts */
.thoughts{
	color: #3D1101 ;
	background: #efe9e7;
    padding: 40px 20px;
}

.thoughts h3{
	text-align: center;
	font-size: 24px;
	margin-bottom: 40px;
}

.thoughts h4{
	font-size: 18px;
	padding: 20px;
}

.thoughts p{
	line-height: 1.5;
	padding: 20px;
}
.thoughts_item{
	position: relative;
}

.thoughts span{
	position: absolute;
	right: 0;
	padding-right: 30px;

}

.thoughts ul{
	display: flex;
	justify-content: space-between;
	padding: 20px;
}
.thoughts ul li{
	display: flex;
	align-items: flex-start;
	width: 31.333%;
}


@media (max-width: 767px) {
	.thoughts ul{
		flex-direction: column;
	}

	.thoughts ul li{
		width: 98%;
		margin-bottom: 20px;
	}
}

/* map */
.map{
	background: #FAFAFA ;
	color: #3D1101;
    padding: 40px 40px;
}

.map h3{
	font-size: 24px;
	text-align: center;
	line-height: 1.5;
	margin-bottom: 40px;
}

.map_list{
	display: flex;
	justify-content: center;
}

.form_booking{
	margin-left: 20px;
	width: 50%;
	font-size: 14px;
}

.case{
	width: 100%;
	height: 32px;
	border-radius: 3px;
	border: 1px solid #DBDBDB;
	font-size: 16px;
	padding-left: 10px;
	margin-bottom: 15px;
	margin-top: 5px;

}

.form-radio-btn{
	margin-top: 10px;
	margin-bottom: 46px;
}

.form-btn{
	text-align: right;
}

.btn{
	background: rgba(0, 0, 0, 0.35);
	color:#fff;
	border-radius: 3px;
	border:0;
	cursor: pointer;
	width: 80px;
	height: 32px;
	margin-left: 10px;

}

.btn:hover{
	background: #F56C23 ;

}

@media (max-width: 568px) {
	.map_list{
		flex-direction: column;
	}
	.form_booking{
		margin-top: 20px;
		width: 100%;
		margin-left: 0px;

	}

	
}

/*animated*/
.animated{
	opacity: 0;
	transition: all .5s;
	transform: translateY(50px);

}

.fadeIn{
	opacity: 1;
	transform: translateY(0px);

}

 /* =========================== cart ================================== */
 /* sidebar */
.cart_content{
	padding: 5%;
	display: flex;
	background: #efe9e7;
    color:#3D1101;
}

.cart_sidebar{
	width: 35%;
	margin-right: 20px;
}

.cart_sidebar h4{
	font-size: 20px;
	margin-bottom: 20px;
}

.cart_sidebar h4 i{
	font-size: 32px;
	margin-right: 20px;
}

.cart_sidebar ul li a{
	text-decoration: none;
	color:#3D1101;
	display: block;
	border-bottom: 1px solid #3D1101;
	padding:10px;
	width: 100%;
	height: 35px;

}

.cart_sidebar ul li a:hover , .cart_sidebar_btn a.active{
	background: #3D1101;
	color:#fff;

}

/* toolbar */

.cart_main{
	width: 65%;
}

.cart_toolbar{
	display: flex;
	justify-content: space-between;
}

.search{
   width: 60%;
   position: relative;
}
.searchbar{
	width: 100%;
	height: 32px;
	border:2px solid #3D1101;
	background: #EFE9E7;
}

.search a{
	display: block;
	width: 36px;
	height: 32px;
	background: #3D1101;
	color: #fff;
	text-align: center;
	line-height: 32px;
	position: absolute;
	right: 0;
	top: 0;
}

.cart_toolbar ul{
	display: flex;
}

.cart_check_txt a{
  text-decoration: none;
  color: #3D1101;
  line-height: 32px;
  margin-right: 15px;
  border-right: 2px solid #3D1101;
  padding-right: 15px;

}

.cart_check_txt a:hover{
	color: #F56C23;
	font-weight: bold;
  }

.cart_check_icon a{
	color: #3D1101;
	line-height: 32px;
	font-size: 28px;

}

.cart_check_icon a:hover{
	color: #F56C23;

}

.cart_check_icon{
	position: relative;
}
.cart_check_icon span{
	font-size: 12px;
	background: red;
	color:#fff;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	text-align: center;
	line-height: 16px;

	position: absolute;
	top: -8px;
	right: -7px;
}


@media (max-width: 568px) {
	.cart_content{
		flex-direction: column;
	}
	.cart_sidebar{
		width: 98%;
		margin-bottom: 30px;
	}

	.cart_toolbar{
		flex-direction: column;
	}

	.cart_toolbar ul{
		margin-top: 30px;
		width: 100%;
		justify-content: flex-end;
	}

	.cart_main{
		width: 100%;
	}
	.search{
		width: 100%;
	 }
	
}

/* product */
.cart_product_img{
	position: relative;
}

.cart_product_img img{
	height: 120px;
}

.cart_product_img i{
	position: absolute;
	top: 10px;
	left:10px;
	color:#fff;
	font-size: 24px;
	cursor: pointer;
}
.cart_product{
	margin-top: 20px;
}
.cart_product ul{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.cart_product ul li{
	width: 31.333%;
	-webkit-box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.16);
		  box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.16);
	margin-bottom: 20px;

}

.cart_product ul li:hover{
	-webkit-box-shadow: 0px 0px 6px 0px #3D1101;
	box-shadow: 0px 0px 6px 0px #3D1101;
}

.cart_product_txt{
	padding: 10px;
}
.cart_product_txt h4{
	font-size: 20px;
	text-align: center;
}
.cart_product_txt h5{
	font-size: 12px;
	text-align: center;
	margin-top: 5px;
	border-bottom: 1px solid #3D1101;
	padding-bottom: 10px;
}

.cart_product_txt p{
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	text-align: center;
	margin-top: 20px;
}


.cart_product_btn{
	color: #FF5E45 ;
	border:2px solid #FF5E45;
	border-radius: 3px;
	width: 80%;
	height: 28px;

	display: block;
	margin: 10px auto;
}
.cart_product_btn i{
	margin-right: 10px;
}
.cart_product_btn:hover{
	color:#3D1101;
	border: 2px solid #3D1101;
}

@media (max-width: 767px) {
	.cart_product ul li{
		width: 43%;
	
	}
}

@media (max-width: 568px) {

	.cart_product_img img{
          width: 100%;
	}
	.cart_product ul{
		flex-direction: column;
	 }
	.cart_product ul li{
		width: 98%;
	
	}
}

 /* =========================== login ================================== */
.login_content{
	padding: 5%;
	background: #efe9e7;
	color: #3D1101;
}
.login_content h2 , .register_content h2{
	background-image: url(../img/logo_l@svg.svg);
	width: 243px;
	height: 48px;
	text-indent: 101%;
	overflow: hidden;
	white-space: nowrap;
	display: block;
	margin:0 auto;
}

.login_content h4 , .register_content h4{
	font-size: 20px;
	text-align: center;
	margin-top: 10px;
	font-weight: bold;
}
.form_login{
	width: 300px;
	padding: 10px;
	-webkit-box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.16);
	box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.16); 
	border-top: 5px solid #FF5E45;
	margin:0 auto;
	margin-top: 30px;
	padding:20px;
}
.form_login h5 , .form_main h5{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}
.mail_item{
	position: relative;
}
.mail_item i{
	position: absolute;
	left: 10px;
	top: 12px;
	color: rgba(61, 17, 1, 0.50);
}
.mail_item input{
	width: 100%;
	height: 32px;
	border-radius: 3px;
	border: 1px solid #cccccc;
	padding-left: 30px;
	margin-top: 5px;
	margin-bottom: 10px;
}
.form_login a , .form_register a{
	text-decoration: none;
	font-size: 14px;
	color:#FF5E45;
}

.form_login a:hover,.form_register a:hover{
	color:#3D1101;
}

.form-btn-login{
	text-align: center;
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}

.btn-login{
	background: rgba(0, 0, 0, 0.35);
	color:#fff;
	border-radius: 3px;
	border:0;
	cursor: pointer;
	width: 125px;
	height: 32px;
}

.btn-login:hover{
	background: #F56C23;
}
 /* =========================== register ================================== */

.register_content{
	padding:5%;
	background: #efe9e7;
	color: #3D1101;
}

.register_content h4{
	margin-bottom: 30px;
}

.form_main{
	width: 70%;
	border-top: 5px solid #FF5E45;
	-webkit-box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.16);
		 box-shadow: 3px 3px 4px 0px rgba(0, 0, 0, 0.16); 
	 padding:20px;
	 margin:0 auto;
	 
}

.form_list{
	display: flex;
}

.form_article{
	width: 50%;
	font-size: 18px;
	margin-right: 20px;
}

.form_article p{
	line-height: 1.3;
}

.form_register{
	width: 50%;
}
 
.form-btn-register{
	text-align: right;
	margin-top: 30px;
}

.btn-register{
	background: rgba(0, 0, 0, 0.35);
	color:#fff;
	border-radius: 3px;
	border:0;
	cursor: pointer;
	width: 125px;
	height: 32px;
}

.btn-register:hover{
	background: #F56C23 ;
}

@media (max-width: 568px) {
	.form_main{
		width: 100%;
	}
	.form_list{
		flex-direction: column;
	}

	.form_article{
		width: 100%;
		margin-bottom: 20px;
	}

	.form_register{
		width: 100%;
	}
}