@font-face {
	font-family: DINProRegular;
	src:
		url(DINProRegular.eot),
		url(DINProRegular.woff) format("woff"),
		url(DINProRegular.ttf) format("truetype");
}
@font-face {
	font-family: AutumnChant;
	src: 
		url(AutumnChant.eot),
		url(AutumnChant.woff) format("woff"),
		url(AutumnChant.ttf) format("truetype");
}

html{
	overflow-x:hidden;
}

body, h1, h2, h3, h4, h5, h6, ol, ul, li, dl, dt, dd{
	margin:0;
	padding:0;
}

body{
	font-family:DINProRegular, Tahoma, 微軟正黑體;
	background:#FFF;
	color:#444;
}

*,
*:before,
*:after{
	box-sizing:border-box;
}
ul, ol{
	list-style:none;
}
a{
	text-decoration:none;
}


#container{
	position:relative;
	z-index:0;
}


/*********************************** slick start *****************************************/
.slick{
	margin:0; /* 覆寫 slick-theme.css 的 .slick-slider 的 margin-bottom: 30px; */
	z-index:0;
}
.slickPN{
	position:absolute;
	top:50%;
	width:80px;
	height:80px;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	cursor:pointer;
	font-size:0;
	white-space:nowrap;
	text-indent:100%;
	overflow:hidden;
	background:rgba(0, 0, 0, 0.2);
	z-index:1;
	opacity:1;
	transition:all 0.2s;
}
.slick:hover .slickPN{
	opacity:1;
}
.slickPN.prev{
	left:0;
	-webkit-transform:translateY(-50%) scaleX(-1);
	transform:translateY(-50%) scaleX(-1);
}
.slickPN.next{
	right:0;
}
.slickPN:before,
.slickPN:after{
	position:absolute;
	content:"";
	left:30px;
	width:30px;
	height:1px;
	background:#FFF;
}
.slickPN:before{
	top:18px;
	-webkit-transform-origin:left top;
	transform-origin:left top;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.slickPN:after{
	top:60px;
	-webkit-transform-origin:left bottom;
	transform-origin:left bottom;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
.slickPN:hover{
	background:rgba(0, 0, 0, 0.5);
}
.slickPN:hover:before,
.slickPN:hover:after{
	
}

.slick-dots{
	bottom:-10.76%;
}
.slick-dots li{
	width:10px;
	height:10px;
	margin:0 15px;
}
.slick-dots li button{	
	width:100%;
	height:100%;
	border-radius:50%;
	border:none;
	background:#CCC;
	box-shadow:0 0 1px 1px rgba(255, 255, 255, 0.2);
}
.slick-dots li button:hover,
.slick-dots li button:focus{
	background:#666;
}
.slick-dots li.slick-active button{
	background:#666;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li button:before,
.slick-dots li.slick-active button:before{
	display:none;
}
/*********************************** slick end *****************************************/

/************************************** header start ***************************************************/
header{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:80px;
	background:#FFF;
	z-index:1;
}
header h1{
	position:absolute;
	left:20px;
	top:15px;
	width:140px;
	z-index:1;
}
header h1 a{
	display:block;
	padding-top:32.14%;
	font-size:0;
	background:url(../images/logo.png) no-repeat left top;
	background-size:contain;
}

header nav{
	position:absolute;
	right:10px;
	top:0;
}
header nav ul{
	overflow:hidden;
}
header nav ul li{
	float:left;
	text-align:center;
	margin:0 0.5em;
}
header nav ul li a{
	display:block;
	line-height:1em;
	color:#333;
	font-size:18px;
	white-space:nowrap;
	padding:1.6em 2.5em 0.5em;
	border-bottom:4px solid transparent;
	transition:all 0.2s;
}
header nav ul li a:hover,
header nav ul li.active a{
	color:#000;
	font-weight:bold;
}
header nav ul li.active a{
	border-color:#EEE;
}

/******************* sns start **********************/
.snsBlock{
	position:absolute;
	right:20px;
	top:100px;
}
.snsBlock .btn{
	cursor:pointer;
	width:20px;
	height:20px;
	background:url(../images/snsBtn.png) no-repeat left top;
	transition:background-position 0.2s;
}
.snsBlock:hover .btn{
	background-position:left bottom;
}
.snsBlock section{
	position:absolute;
	overflow:hidden;
	right:20px;
	top:0;
	width:0;
	height:20px;
	transition:width 0.2s;
}
.snsBlock:hover section,
.sns{
	width:150px;
}
.sns:after{
	clear:both;
	content:"";
	display:block;
}
.sns > div{
	float:left;	
}
.sns > div+div{
	margin-left:5px;
}
.sns > div a{
	overflow:hidden;
	text-indent:-9999px;
	display:block;
	width:20px;
	height:20px;
	background-repeat:no-repeat;
}
.sns > div.twitter a{
	background-image:url(../images/btnTwitter.png);
}
.fb-like{
    height: 20px;
    overflow: hidden;
}
/******************* sns end **********************/
/************************************** header end ***************************************************/


/************************************** home start ***************************************************/
#home{
}
#home .ct{
	position:relative;
	padding-top:40%;
	background:url(../images/homeKV.jpg) no-repeat center center;
	background-size:cover;
}
#home .ct .kv{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#home .ct .kv h2{
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	color:#FFF;
	text-align:center;
	font-size:4vw;
	letter-spacing:0.06em;
	text-shadow:8px 8px 10px rgba(0, 0, 0, 0.8);
}
#home .ct .kv h2 span{
	display:inline-block;
}
.downArrow{
	position:absolute;
	left:50%;
	bottom:0;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	cursor:pointer;
	border:50px solid transparent;
	border-top:none;
	border-bottom:40px solid #FFF;
}
.downArrow span{
	position:absolute;
	width:100px;
	left:50%;
	top:30px;
	-webkit-animation:floatDownArrow 0.5s infinite alternate;
	animation:floatDownArrow 0.5s infinite alternate;
}
@-webkit-keyframes floatDownArrow{
	to{
		-webkit-transform:translateY(5px);
	}
}
@keyframes floatDownArrow{
	to{
		transform:translateY(5px);
	}
}
.downArrow span:before,
.downArrow span:after{
	position:absolute;
	left:0;
	bottom:0;
	content:"";
	display:block;
	width:15%;
	height:1px;
	background:#999;
	-webkit-transform-origin:left top;
	transform-origin:left top;
}
.downArrow span:before{
	-webkit-transform:rotate(-150deg);
	transform:rotate(-150deg);
}
.downArrow span:after{
	-webkit-transform:rotate(-30deg);
	transform:rotate(-30deg);
}
/************************************** home end ***************************************************/


/************************************** 共用部份 start ***************************************************/
#container > section{
	padding-top:80px;
}

.waveTop:before,
.waveBtm:after{
	content:"";
	display:block;
	padding-top:4.84%;
	background:url(../images/wave.png) repeat-x center 3px;
	opacity:0.3;
}
.waveBtm:after{
	-webkit-transform:scaleY(-1);
	transform:scaleY(-1);
}
.texture,
.textureTop:before{
	background:url(../images/texture.jpg) repeat center top;
}
.textureTop:before{
	content:"";
	display:block;
	padding-top:4.84%;
	opacity:0.5;
}

/****************** 輪播圖 start ************************/
.slideShowP{
	position:relative;
}
.slideShowP > *{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:block;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
/****************** 輪播圖 end ************************/

/****************** 區塊標題內文 start ************************/
.sectionT{
	padding:6.5% 0;
}
.sectionT article{
	margin:0 auto;
	width:750px;
	display:flex;
}
.sectionT article.even{
	flex-direction:row-reverse;
}
.sectionT article .title{
	margin-right:6.5%;
	color:#8f6444;
	font-size:1.2em;
	white-space:nowrap;
}
.sectionT article.even .title{
	margin-right:0;
	margin-left:6.5%;
	text-align:right;
}
.sectionT article .title .num{
	font-size:7em;
	line-height:1em;
	color:#c3956d;
	height:0.75em;
	overflow:hidden;
}
.sectionT article .title .num span{
	display:block;
}
.sectionT article .title h2{
	font-weight:normal;
	margin-top:0.5em;
}
.sectionT article .title h3{
	font-size:0.8em;
	margin-top:0.8em;
}
.sectionT article .txt{
	align-self:flex-end;
	line-height:1.8em;
}
.sectionT article .txt p:first-child{
	margin-top:0;
}
.sectionT article .txt p:last-child{
	margin-bottom:0;
}
/****************** 區塊標題內文 end ************************/
/************************************** 共用部份 end ***************************************************/


/************************************** hygge start ***************************************************/
#hygge{
}
#hygge .slideShowP{
	padding-top:26.5%;
}
#hygge .slideShowP .img{
	width:50%;
}
#hygge .slideShowP .img:nth-child(even){
	left:auto;
	right:0;
	border-left:1px solid #FFF;
}
#hygge .slideShowP .img:nth-child(1){ background-image:url(../images/hyggeL1.jpg);}
#hygge .slideShowP .img:nth-child(2){ background-image:url(../images/hyggeR1.jpg);}
#hygge .slideShowP .img:nth-child(3){ background-image:url(../images/hyggeL2.jpg);}
#hygge .slideShowP .img:nth-child(4){ background-image:url(../images/hyggeR2.jpg);}
#hygge .slideShowP .img:nth-child(5){ background-image:url(../images/hyggeL3.jpg);}
#hygge .slideShowP .img:nth-child(6){ background-image:url(../images/hyggeR3.jpg);}
/************************************** hygge end ***************************************************/


/************************************** cooking start ***************************************************/
#cooking{
}
#cooking .slideShowP{
	padding-top:40%;
	box-shadow:0 5px 20px rgba(0, 0, 0, 0.3);
}
#cooking .slideShowP .img:nth-child(1){ background-image:url(../images/cookingKV1.jpg);}
#cooking .slideShowP .img:nth-child(2){ background-image:url(../images/cookingKV2.jpg);}

/****************** 食譜 start *************************/
.recipeBlock{
}
.recipeCT{
	padding:5% 0;
}

/********* 選單 start ***********/
.recipeCT > ul{
	width:920px;
	margin:0 auto;
	padding-bottom:1.5em;
	text-align:center;
	border-bottom:1px solid #CCC;
}
.recipeCT > ul li{
	display:inline-block;
	cursor:pointer;
	line-height:1em;
	margin:0 2em;
	font-size:1.05em;
}
.recipeCT > ul li:before{
	content:"";
	display:inline-block;
	vertical-align:middle;
	width:5px;
	height:5px;
	border-radius:50%;
	background:transparent;
	margin-right:0.5em;
	-webkit-transform:translateY(-2px);
	transform:translateY(-2px);
}
.recipeCT > ul li:hover,
.recipeCT > ul li.active{
	font-weight:bold;
}
.recipeCT > ul li.active:before{
	background:currentColor;
}
/********* 選單 end ***********/

/********* 內容 start ***********/
.recipeAllContainer{
	position:relative;
	margin-top:3%;
}
.recipeAll{
	width:360%;
	transition:all 0.5s;
}
.recipeAll.r1{ -webkit-transform:translateX(0);transform:translateX(0);}
.recipeAll.r2{ -webkit-transform:translateX(-25%);transform:translateX(-25%);}
.recipeAll.r3{ -webkit-transform:translateX(-50%);transform:translateX(-50%);}
.recipeAll.r4{ -webkit-transform:translateX(-72.23%);transform:translateX(-72.23%);}
.recipeAll:after{
	content:"";
	clear:both;
	display:block;
}
.recipe{
	float:left;
	width:25%;
	display:flex;
	align-items:center;
}

/**** 左圖 start ******/
.recipe .imgBlock{
	width:60%;
	padding:1.17%;
	background:#FFF;
}
.recipe .imgBlock .imgContainer{
}
.recipe .imgBlock .imgContainer .img{
}
.recipe .imgBlock .imgContainer .img img{
	display:block;
	width:100%;
}
/**** 左圖 end ******/

/**** 右文 start ******/
.recipe .txtBlock{
	width:40%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.recipe .txtBlock .txtContainer{
	display:block;
	width:60%;
	max-width:330px;
	margin-left:-5.3%;
	color:currentColor;
}
.recipe .txtBlock .txtContainer h4{
	border-bottom:1px solid #999;
	padding-bottom:1em;
}
.recipe .txtBlock .txtContainer h4 span{
	display:block;
	font-family:AutumnChant;
	font-size:1.5em;
}
.recipe .txtBlock .txtContainer h4 em{
	display:block;
	font-style:normal;
	font-size:1.1em;
	margin:0.2em 0 0 1em;
}
.recipe .txtBlock .txtContainer ol{
	margin-top:1em;
}
.recipe .txtBlock .txtContainer ol li{
	margin-top:0.2em;
	line-height:1.8em;
}
.recipe .txtBlock .txtContainer ol li:before{
	content:"";
	float:left;
	display:block;
	margin-right:0.5em;
	width:2px;
	height:1em;
	background:#666;
	-webkit-transform:translateY(0.3em);
	transform:translateY(0.3em);
}
.recipe .txtBlock .txtContainer ol li span{
	display:block;
	overflow:hidden;
}
.recipe .txtBlock .txtContainer img{
	margin-top:10%;
	display:block;
	width:100%;
	border:none;
	-webkit-transform:scale(0.95);
	transform:scale(0.95);
	transition:all 0.2s;
}
.recipe .txtBlock .txtContainer:hover img{
	-webkit-transform:none;
	transform:none;
}
.recipe .txtBlock .txtContainer h5{
	margin-top:10%;
	text-align:center;
	color:#666;
}
.recipe .txtBlock .txtContainer > span{
	margin:10% auto 0;
	padding:0.55em 0.2em;
	display:block;
	text-align:center;
	font-size:0.8em;
	line-height:1em;
	color:#FFF;
	width:3em;
	height:3em;
	border-radius:50%;
	transition:all 0.2s;
}
.recipe .txtBlock .txtContainer:hover > span{
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
}
.recipe:nth-child(1) .txtBlock .txtContainer > span{ background:rgba(60, 68, 23, 0.6);}
.recipe:nth-child(2) .txtBlock .txtContainer > span{ background:rgba(109, 64, 47, 0.6);}
.recipe:nth-child(3) .txtBlock .txtContainer > span{ background:rgba(171, 87, 15, 0.5);}
.recipe:nth-child(4) .txtBlock .txtContainer > span{ background:rgba(163, 37, 37, 0.5);}
/**** 右文 end ******/

/**** 箭頭 start ******/
.recipeAllContainer .arrow{
	position:absolute;
	right:12%;
	top:50%;
	width:80px;
	height:100px;
	cursor:pointer;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}
.recipeAllContainer .r4 + .arrow{
	right:auto;
	left:3%;
	-webkit-transform:translateY(-50%) scaleX(-1);
	transform:translateY(-50%) scaleX(-1);
}
.recipeAllContainer .arrow span{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:all 0.2s;
}
.recipeAllContainer .arrow:hover span{
	-webkit-transform:translateX(10px);
	transform:translateX(10px);
}
.recipeAllContainer .arrow span:before,
.recipeAllContainer .arrow span:after{
	position:absolute;
	content:"";
	display:block;
	right:25px;
	top:50%;
	width:60%;
	height:1px;
	background:#333;
	-webkit-transform-origin:right center;
	transform-origin:right center;
}
.recipeAllContainer .arrow span:before{
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.recipeAllContainer .arrow span:after{
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
/**** 箭頭 end ******/
/********* 內容 end ***********/
/****************** 食譜 end *************************/
/************************************** cooking end ***************************************************/


/************************************** art start ***************************************************/
#art{
}
/****************** keyword start *************************/
#art .keyword{
	display:flex;
}
#art .keyword li{
	position:relative;
	width:25%;
	padding-top:30.2%;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position:center;
	background-size:105%;
	transition:background-size 1s;
}
#art .keyword li+li{
	border-left:1px solid #FFF;
}
#art .keyword li:nth-child(1){ background-image:url(../images/artKeyword1.jpg);}
#art .keyword li:nth-child(2){ background-image:url(../images/artKeyword2.jpg);}
#art .keyword li:nth-child(3){ background-image:url(../images/artKeyword3.jpg);}
#art .keyword li:nth-child(4){ background-image:url(../images/artKeyword4.jpg);}
#art .keyword li:before,
#art .keyword li a{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#art .keyword li:before{
	content:"";
	display:block;
	background:rgba(0, 0, 0, 0.6);
	opacity:0;
	transition:opacity 0.5s;
}
#art .keyword li a{
	font-style:normal;
	font-weight:bold;
	font-size:1.2em;
	color:#FFF;
	display:flex;
	justify-content:center;
	align-items:center;
	-webkit-transform:translateY(-1em);
	transform:translateY(-1em);
	text-shadow:0 0 10px rgba(0, 0, 0, 1);
	opacity:0;
	transition:all 0.5s;
}
#art .keyword li:hover{
	background-size:101%;
}
#art .keyword li:hover:before{
	opacity:1;
}
#art .keyword li:hover a{
	-webkit-transform:translateY(0);
	transform:translateY(0);
	opacity:1;
}
/****************** keyword end *************************/

/****************** 餐桌 start *************************/
#art .table{
	position:relative;
	padding-top:35.41%;
	background:url(../images/tableKV.jpg) no-repeat center center;
	background-size:cover;
	margin-bottom:3%;
}
#art .table:before{
	position:absolute;
	content:"";
	display:block;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(70, 70, 70, 0.5);
	opacity:0;
	transition:opacity 1s;
}
#art .table li{
	position:absolute;
	z-index:0;
}
#art .table li .btn{
	width:3em;
	height:3em;
	line-height:1em;
	padding:0.95em 0;
	text-align:center;
	color:#FFF;
	background:#333;
	border-radius:50%;
	cursor:pointer;
	display:block;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	-webkit-animation:btnFlash 0.8s infinite alternate;
	animation:btnFlash 0.8s infinite alternate;
}
@-webkit-keyframes btnFlash{
	to{
		-webkit-transform:translate(-50%, -50%) scale(1.2) ;
		transform:translate(-50%, -50%) scale(1.2) ;
		background:#c3956d;
		box-shadow:0 0 15px rgba(0, 0, 0, 0.7);
	}
}
@keyframes btnFlash{
	to{
		-webkit-transform:translate(-50%, -50%) scale(1.2);
		transform:translate(-50%, -50%) scale(1.2);
		background:#c3956d;
		box-shadow:0 0 15px rgba(0, 0, 0, 0.7);
	}
}
#art .table li .btn:hover{
	-webkit-transform:translate(-50%, -50%) scale(1.2);
	transform:translate(-50%, -50%) scale(1.2);
	background:#c3956d;
	box-shadow:0 0 15px rgba(0, 0, 0, 0.7);
}
#art .table li .btn:after{
	content:"";
	display:inline-block;
	vertical-align:bottom;
	margin-left:0.1em;
	border:4px solid transparent;
	border-bottom:none;
	border-top-color:#FFF;
}
#art .table li .popCT{
	position:absolute;
	width:250px;
	padding-bottom:1.5em;
	background:rgba(50, 50, 50, 0.8);
	-webkit-transform:scale(0);
	transform:scale(0);
	transition:all 0.2s;
}
#art .table li .popCT h4{
	line-height:1em;
	padding:0.6em 1em;
	color:#FFF;
}
#art .table li .popCT a{
	display:block;
	background:#cdc5c0;
	color:currentColor;
}
#art .table li .popCT a .img{
	position:relative;
}
#art .table li .popCT a .img img{
	display:block;
	width:100%;
	border:none;
}
#art .table li .popCT a .img h5{
	position:absolute;
	font-size:0.7em;
	color:#333;
}
#art .table li .popCT a .img span{
	position:absolute;
	padding:0.5em 0.2em;
	display:block;
	text-align:center;
	font-size:0.7em;
	line-height:1em;
	color:#FFF;
	background:#666;
	width:3em;
	height:3em;
	border-radius:50%;
	transition:all 0.2s;
}
#art .table li:nth-child(1) .popCT a .img h5{
	right:20px;
	bottom:45px;
}
#art .table li:nth-child(1) .popCT a .img span{
	right:50px;
	top:50px;
}
#art .table li:not(:nth-child(1)) .popCT a .img h5{
	left:15px;
	bottom:15px;
}
#art .table li:not(:nth-child(1)) .popCT a .img span{
	right:20px;
	bottom:15px;
}
#art .table li .popCT a:hover .img span{
	-webkit-transform:scale(1.3);
	transform:scale(1.3);
	background:#c3956d;
}
#art .table li .popCT a p{
	line-height:1.6em;
	margin:0;
	padding:0 15px 15px;
	font-size:0.8em;
}
#art .table li .popCT .closeBtn{
	position:absolute;
	right:0;
	top:0;
	width:34px;
	height:34px;
	cursor:pointer;
}
#art .table li .popCT .closeBtn span{
	position:absolute;
	left:0;
	top:0;
	display:block;
	width:100%;
	height:100%;
	transition:all 0.2s;
}
#art .table li .popCT .closeBtn span:before,
#art .table li .popCT .closeBtn span:after{
	position:absolute;
	content:"";
	display:block;
	left:50%;
	top:50%;
	width:60%;
	height:1px;
	background:#FFF;
}
#art .table li .popCT .closeBtn span:before{
	-webkit-transform:translate(-50%, -50%) rotate(-45deg);
	transform:translate(-50%, -50%) rotate(-45deg);
}
#art .table li .popCT .closeBtn span:after{
	-webkit-transform:translate(-50%, -50%) rotate(45deg);
	transform:translate(-50%, -50%) rotate(45deg);
}
#art .table li .popCT .closeBtn:hover span{
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
}

#art .table li:nth-child(1){
	left:7.9%;
	top:45.3%;
}
#art .table li:nth-child(1) .popCT{
	left:2.5em;
	top:-1.5em;
	-webkit-transform-origin:left top;
	transform-origin:left top;
}
#art .table li:nth-child(2){
	left:44.5%;
	top:9.7%;
}
#art .table li:nth-child(2) .popCT{
	right:5.5em;
	top:-1.5em;
	-webkit-transform-origin:right top;
	transform-origin:right top;
}
#art .table li:nth-child(3){
	left:53%;
	top:55%;
}
#art .table li:nth-child(3) .popCT{
	left:2.5em;
	top:-1.5em;
	-webkit-transform-origin:left top;
	transform-origin:left top;
}
#art .table li:nth-child(4){
	left:73%;
	top:75.73%;
}
#art .table li:nth-child(4) .popCT{
	left:2.5em;
	top:-10em;
	-webkit-transform-origin:left center;
	transform-origin:left center;
}
#art .table li:nth-child(5){
	left:83.85%;
	top:9%;
}
#art .table li:nth-child(5) .popCT{
	right:5.5em;
	top:-1.5em;
	-webkit-transform-origin:right top;
	transform-origin:right top;
}

#art .table.pop:before{
	opacity:1;
}
#art .table.p1 li:nth-child(1),
#art .table.p2 li:nth-child(2),
#art .table.p3 li:nth-child(3),
#art .table.p4 li:nth-child(4),
#art .table.p5 li:nth-child(5){
	z-index:1;
}
#art .table.p1 li:nth-child(1) .popCT,
#art .table.p2 li:nth-child(2) .popCT,
#art .table.p3 li:nth-child(3) .popCT,
#art .table.p4 li:nth-child(4) .popCT,
#art .table.p5 li:nth-child(5) .popCT{
	-webkit-transform:none;
	transform:none;
}
/****************** 餐桌 end *************************/
/************************************** art end ***************************************************/


/************************************** product start ***************************************************/
#product{
}
#product .slideShowP{
	padding-top:40%;
}
#product .slideShowP a{
	font-size:0;
}
#product .slideShowP a.alonzo{ background-image:url(../images/productKV1.jpg);}
#product .slideShowP a.al_dente{ background-image:url(../images/productKV2.jpg);}
#product .slideShowP a.gf{ background-image:url(../images/productKV3.jpg);}
/************************************** product end ***************************************************/


/************************************** footer end ***************************************************/
footer{
	background:#F2F2F2;
	padding:8% 0 7%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	font-size:14px;
}
footer ul{
	display:flex;
	justify-content:center;
}
footer ul li{
	margin:0 3.5em;
}
footer ul li h6{
	font-size:1.2em;
	color:#333;
}
footer ul li h6:before{
	content:"‧ ";
}
footer ul li p a{
	display:inline-block;
	vertical-align:middle;
	font-size:0;
	margin-right:10px;
	transition:opacity 0.2s;
}
footer ul li p a:hover{
	opacity:0.5;
}
footer ul li p a:before{
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	height:40px;
}
footer ul li p a.alonzo{ width:70px;}
footer ul li p a.alonzo:before{	background-image:url(../images/logo_alonzo.png);}
footer ul li p a.al_dente{ width:37px;}
footer ul li p a.al_dente:before{ background-image:url(../images/logo_al_dente.png);}
footer ul li p a.gf{ width:37px;}
footer ul li p a.gf:before{	background-image:url(../images/logo_gf.png);}
footer ul li p a.domani{ width:76px;}
footer ul li p a.domani:before{	background-image:url(../images/logo_domani.png);}
footer ul li p a.umkt{ width:58px;}
footer ul li p a.umkt:before{ background-image:url(../images/logo_umkt.png);}
footer ul li p a.jutf{ width:166px;}
footer ul li p a.jutf:before{	background-image:url(../images/logo_jutf.png);}
footer .toTop{
	margin:5% auto 0;
	width:3em;
	height:3em;
	padding:1em 0;
	line-height:1em;
	text-align:center;
	border-radius:50%;
	background:#666;
	color:#FFF;
	cursor:pointer;
	transition:background 0.2s;
}
footer .toTop:hover{
	background:#333;
}
footer .copyright{
	margin-top:2.5%;
	text-align:center;
}
/************************************** footer end ***************************************************/


@media screen and (max-width:1280px){
	
	/************************************** footer end ***************************************************/
	footer{
		padding:5% 2.5%;
		font-size:13px;
	}
	footer ul{
		flex-direction:column;
	}
	footer ul li{
		margin:1em 0 0;
	}
	footer ul li p{
		margin:1em 0.5em;
	}
	footer .copyright{
		margin-top:10%;
		font-size:0.8em;
	}
	/************************************** footer end ***************************************************/
	
}


@media screen and (min-width:1024px) and (max-width:1440px){
	
	/************************************** header start ***************************************************/
	header nav ul li a{
		font-size:15px;
		padding:2.2em 2em 0.5em;
	}
	/************************************** header end ***************************************************/
	
	/************************************** cooking start ***************************************************/	
	/****************** 食譜 start *************************/	
	/********* 內容 start ***********/
	/**** 右文 start ******/
	.recipe .txtBlock .txtContainer ol{
		font-size:0.8em;
	}
	/**** 右文 end ******/
	/**** 箭頭 start ******/
	.recipeAllContainer .arrow{
		width:60px;
		height:75px;
	}
	.recipeAllContainer .arrow span:before,
	.recipeAllContainer .arrow span:after{
		right:15px;
	}
	/**** 箭頭 end ******/
	/********* 內容 end ***********/
	/****************** 食譜 end *************************/
	/************************************** cooking end ***************************************************/
	
}


@media screen and (max-width:1023px){
	
	/*********************************** slick start *****************************************/	
	.slick-dots{
		bottom:-15%;
	}
	.slick-dots li{
		margin:0 5px;
	}
	/*********************************** slick end *****************************************/
	
	/************************************** header start ***************************************************/
	header{
		height:50px;
	}
	header h1{
		left:10px;
		top:10px;
		width:90px;
	}
	header nav{
		top:50px;
		right:0;
		width:100%;
		background:rgba(255, 255, 255, 0.95);
		border-bottom:1px solid #CCC;
		display:none;
	}
	header nav ul li{
		float:none;
		width:auto;
	}
	header nav ul li a{
		font-size:15px;
		padding:1em 0;
		border-bottom:none;
	}
	
	/********* sns start **********/
	.snsBlock{
		position:static;
		width:150px;
		margin:20px auto;
	}
	.snsBlock .btn{
		display:none;
	}
	.snsBlock section{
		position:static;
		width:auto;
	}
	/********* sns end **********/
	
	header .burgerBtn{
		position:absolute;
		right:10px;
		top:50%;
		width:30px;
		height:36px;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
		cursor:pointer;
	}
	header .burgerBtn span,
	header .burgerBtn span:before,
	header .burgerBtn span:after{
		position:absolute;
		left:0;
		display:block;
		width:100%;
		height:2px;
		background:#CCC;
		transition:all 0.2s;
	}
	header .burgerBtn span:before,
	header .burgerBtn span:after{
		content:"";
	}
	header .burgerBtn span{
		top:50%;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	header .burgerBtn span:before{
		top:-6px;
	}
	header .burgerBtn span:after{
		top:6px;
	}
	header.open .burgerBtn span{
		background:transparent;
	}
	header.open .burgerBtn span:before,
	header.open .burgerBtn span:after{
		top:0;
	}
	header.open .burgerBtn span:before{
		-webkit-transform:rotate(-45deg);
		transform:rotate(-45deg);
	}
	header.open .burgerBtn span:after{
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	/************************************** header end ***************************************************/
	
	/************************************** home start ***************************************************/
	#home .ct{
		padding-top:calc(100vh - 70px);
	}
	#home .ct .kv h2{
		left:5%;
		width:90%;
		font-size:15vw;
		letter-spacing:0.02em;
		text-align:left;
	}
	/************************************** home end ***************************************************/
	
	/************************************** 共用部份 start ***************************************************/
	#container > section{
		padding-top:50px;
	}
	.waveTop:before,
	.waveBtm:after{
		background-size:200%;
		padding-top:9.68%;
	}
	/****************** 區塊標題內文 start ************************/
	.sectionT article{
		width:85%;
		display:block;
	}
	.sectionT article .title{
		margin-right:0;
		font-size:1em;
	}
	.sectionT article.even .title{
		margin-left:0;
	}
	.sectionT article .txt{
		margin-top:2em;
		font-size:0.8em;
	}
	/****************** 區塊標題內文 end ************************/
	/************************************** 共用部份 end ***************************************************/
	
	/************************************** hygge start ***************************************************/
	#hygge .slideShowP{
		padding-top:53%;
	}
	#hygge .slideShowP .img{
		width:100%;
	}
	#hygge .slideShowP .img:nth-child(even){
		left:0;
		right:auto;
		border-left:none;
	}
	/************************************** hygge end ***************************************************/
	
	/************************************** cooking start ***************************************************/
	#cooking .slideShowP{
		padding-top:53%;
	}
	/****************** 食譜 start *************************/
	/********* 選單 start ***********/
	.recipeCT > ul{
		display:none;
	}
	/********* 選單 end ***********/
	/********* 內容 start ***********/
	.recipeAllContainer{
		margin:3% auto 0;
		width:95%;
	}
	.recipeAll{
		width:auto;
	}
	.recipeAll.r1,
	.recipeAll.r2,
	.recipeAll.r3,
	.recipeAll.r4{ -webkit-transform:none;transform:none;}
	.recipe{
		float:none;
		width:auto;
		display:block;
		margin-top:10%;
	}
	/**** 左圖 start ******/
	.recipe .imgBlock{
		width:auto;
	}
	/**** 左圖 end ******/
	/**** 右文 start ******/
	.recipe .txtBlock{
		width:auto;
		margin-top:15%;
	}
	.recipe .txtBlock .txtContainer{
		width:90%;
		margin-left:0;
	}
	.recipe .txtBlock .txtContainer ol{
		font-size:0.8em;
	}
	/**** 右文 end ******/
	/**** 箭頭 start ******/
	.recipeAllContainer .arrow{
		display:none;
	}
	/**** 箭頭 end ******/
	/********* 內容 end ***********/
	/****************** 食譜 end *************************/
	/************************************** cooking end ***************************************************/
	
	/************************************** art start ***************************************************/
	/****************** keyword start *************************/
	#art .keyword{
		flex-wrap:wrap;
	}
	#art .keyword li{
		width:50%;
		padding-top:50%;
	}
	#art .keyword li:nth-child(odd){
		border-left:none;
	}
	#art .keyword li:nth-child(3),
	#art .keyword li:nth-child(4){
		border-top:1px solid #FFF;
	}
	#art .keyword li a{
		font-size:1em;
	}
	/****************** keyword end *************************/
	/****************** 餐桌 start *************************/
	#art .table{
		padding:3%;
		background:#cdc5c0;
	}
	#art .table:before{
		display:none;
	}
	#art .table li{
		position:static;
		margin-top:10%;
	}
	#art .table li .btn{
		display:none;
	}
	#art .table li .popCT{
		position:static;
		width:auto;
		padding-bottom:0;
		-webkit-transform:none;
		transform:none;
		transition:none;
	}
	#art .table li .popCT .closeBtn{
		display:none;
	}
	/****************** 餐桌 end *************************/
	/************************************** art end ***************************************************/
	
	/************************************** product start ***************************************************/
	#product .slideShowP{
		padding-top:53%;
	}
	/************************************** product end ***************************************************/
	
}