@charset "utf-8";
/*------------------------------
		mv
---------------------------------*/
.recipe{overflow: hidden;}
.recipe #mv{
	background: url(../images/recipe/mv_bg.jpg) no-repeat center center;
	background-size: cover;
	height: 380px;
	padding: 0px 0 0 0px;
	display: table-cell;
	vertical-align: middle;
	width: 2000px;
}
.recipe #mv h2{
	margin: 0 auto 0;
	width: 80%;
	max-width: 555px;
}
.recipe #mv h2 img{
	width: 100%;
}


/*------------------------------
		contents
---------------------------------*/

.recipe #contents{
	background: url(../images/recipe/bg.jpg) no-repeat center 0;
	background-size: cover;
	padding: 110px 40px 40px;
	overflow: hidden;
}

.recipe #contents .inner{
	max-width: 880px;
	margin: 0 auto;
}
.recipe .tab{
	position: relative;
	z-index: 1;
	overflow: hidden;
	box-shadow: 0px 3px 1px #ccc;
}
.recipe .tab li{
	width: 20%;
	float: left;
	height: 75px;
	line-height: 70px;
	background-color: #fff;
	text-align: center;
	font-size: 18px;
	color: #811709;
	font-weight: 500;
	border-radius: 5px;
	cursor: pointer;
	transition: .7s;
}
.recipe .tab li.spring{ background-color: #f5b8bb;}
.recipe .tab li.summer{ background-color: #aed581;}
.recipe .tab li.autumn{ background-color: #fbc02d;}
.recipe .tab li.winter{ background-color: #80deea;}

.recipe .tab li:hover{background-color: #f9f2dd;}
.recipe .tab li.spring:hover,.recipe .tab li.spring.current{	background-color: #ffe3e4;}
.recipe .tab li.summer:hover,.recipe .tab li.summer.current{ background-color: #e0fac2;}
.recipe .tab li.autumn:hover,.recipe .tab li.autumn.current{ background-color: #ffe8af;}
.recipe .tab li.winter:hover,.recipe .tab li.winter.current{ background-color: #ddfbff;}

.recipe .thum{
	background-color: #fff;
	overflow: hidden;
	box-shadow: 0px 3px 1px #ccc;
	padding: 25px 45px;
	margin: -5px 0 50px;
	position: relative;
	z-index: 2;
}
.recipe .thum.spring{	background-color: #ffe3e4; box-shadow: 0px 3px 1px #f5b8bb;}
.recipe .thum.summer{ background-color: #e0fac2; box-shadow: 0px 3px 1px #aed581;}
.recipe .thum.autumn{ background-color: #ffe8af; box-shadow: 0px 3px 1px #fbc02d;}
.recipe .thum.winter{ background-color: #ddfbff; box-shadow: 0px 3px 1px #80deea;}

.recipe .thum p{
	margin-bottom: 5px;
	font-size: 12px;
	text-align: center;
}
.recipe .thum p span{
	display: inline-block;
	line-height: 1.2;
	height: 25px;
}
.recipe .thum a{
	display:block;
	margin-bottom: 3px;
	box-sizing: border-box !important;
	border: 5px solid #fff;
	transition: .7s;
}
.recipe .thum.spring a{border-color: #ffe3e4;}
.recipe .thum.summer a{border-color: #e0fac2;}
.recipe .thum.autumn a{border-color: #ffe8af;}
.recipe .thum.winter a{border-color: #ddfbff;}

.recipe .thum a.spring:hover,.recipe .thum a.spring.current{border-color: #f5b8bb;}
.recipe .thum a.summer:hover,.recipe .thum a.summer.current{border-color: #aed581;}
.recipe .thum a.autumn:hover,.recipe .thum a.autumn.current{border-color: #fbc02d;}
.recipe .thum a.winter:hover,.recipe .thum a.winter.current{border-color: #80deea;}
.recipe .thum a img{
	transition: .7s;
}
.recipe .thum a:hover img{
	opacity: 0.7;
}

.recipe .thum .slider{
	overflow: hidden;
}

.recipe .thum .no_slider p{
	float: left;
	width: 33.3%;
	margin-left: 0;
}
.recipe .thum .no_slider p img{
	width: 100%;
}

.recipe .thum .btnNext{
	cursor: pointer;
	background: url(../images/recipe/btnNext.png) no-repeat;
	background-size: 30px;
	width: 30px;
	height: 34px;
	position: absolute;
	top:50%;
	right: 0;
	margin-top: -30px;
	transition: .7s;
}
.recipe .thum .btnPrev{
	cursor: pointer;
	background: url(../images/recipe/btnPrev.png) no-repeat;
	background-size: 30px;
	width: 30px;
	height: 34px;
	position: absolute;
	top:50%;
	left: 0;
	margin-top: -30px;
	transition: .7s;
}
.recipe .thum .btnNext:hover,.recipe .thum .btnPrev:hover{
	opacity: 0.7;
}

.recipe .box{
	background-color: #fff;
	overflow: hidden;
	box-shadow: 0px 3px 1px #ccc;
	padding: 45px 45px;
	height: 600px;
}
.recipe .box li{
	clear: both;
	opacity: 0;
}

.recipe .box .head{
	overflow: hidden;
	margin-bottom: 45px;
}
.recipe .box .head .pic{
	float: left;
	width: 56%;
}
.recipe .box .head .pic img{
	width: 100%;
}
.recipe .box .head .textArea{
	overflow-x: hidden;
	zoom:1;
	padding-left: 20px;
}
.recipe .box .head .textArea h3{
	font-size: 20px;
	font-weight: 600;
	border-top: 1px solid #ddc3ac;
	border-bottom: 1px solid #ddc3ac;
	padding: 10px 5px 7px;
	line-height: 1.6;
}
.recipe .box .head .textArea p.num{
	text-align: right;
	margin: 10px 0 20px;
	font-size: 14px;
}
.recipe .box .head .textArea p.txt{
	margin-bottom: 25px;
}
.recipe .box .head .textArea .arrange{
}
.recipe .box .head .textArea .arrange img{
	width: 50%;
	float: left;
}
.recipe .box .head .textArea .arrange i{
	float: left;
	width: 30%;
	margin-left: 5%;
}
.recipe .box .head .textArea .arrange i img{
	float: none;
	width: 100%;
}

.recipe .box .material{
	width: 40%;
	float: left;
}
.recipe .box .material h4{
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 15px;
}
.recipe .box .material table{
	width: 100%;
	border-top: 1px solid;
	border-left: 1px solid;
}
.recipe .box .material table th{
	padding: 10px;
	font-size: 13px;
	border-bottom: 1px solid;
	border-right: 1px solid;
}
.recipe .box .material table td{
	padding: 10px;
	font-size: 13px;
	text-align: center;
	border-bottom: 1px solid;
	border-right: 1px solid;
}
.recipe .box li.spring .material table,.recipe .box li.spring .material table th,.recipe .box li.spring .material table td{
	border-color:#f5b8bb;
}
.recipe .box li.summer .material table,.recipe .box li.summer .material table th,.recipe .box li.summer .material table td{
	border-color:#aed581;
}
.recipe .box li.autumn .material table,.recipe .box li.autumn .material table th,.recipe .box li.autumn .material table td{
	border-color:#fbc02d;
}
.recipe .box li.winter .material table,.recipe .box li.winter .material table th,.recipe .box li.winter .material table td{
	border-color:#80deea;
}
.recipe .box li.spring .material table tr.head{margin-bottom: 0;}
.recipe .box li.spring .material table tr.head th{
	color: #fff;
	font-weight: 600;
}
.recipe .box li.spring .material table tr.head th:nth-of-type(2){ text-align: center;}
.recipe .box li.spring .material table tr.head th{
	background-color: #f5b8bb;
}
.recipe .box li.summer .material table tr.head th:nth-of-type(2){ text-align: center;}
.recipe .box li.summer .material table tr.head th{
	background-color: #aed581;
}
.recipe .box li.autumn .material table tr.head th:nth-of-type(2){ text-align: center;}
.recipe .box li.autumn .material table tr.head th{
	background-color: #fbc02d;
}
.recipe .box li.winter .material table tr.head th:nth-of-type(2){ text-align: center;}
.recipe .box li.winter .material table tr.head th{
	background-color: #80deea;
}
.recipe .box li .material table tr.bg th{
	font-weight: 600;
}
.recipe .box li.spring .material table tr.bg{	background-color: #ffe3e4;}
.recipe .box li.summer .material table tr.bg{ background-color: #e0fac2;}
.recipe .box li.autumn .material table tr.bg{ background-color: #ffe8af;}
.recipe .box li.winter .material table tr.bg{ background-color: #ddfbff;}

.recipe .box .material .note{
	margin-top: 10px;
	line-height: 1.6;
	font-size: 12px;
}
.recipe .box .material th .note{
	font-size: 11px;
	margin-top: 5px;
}
.recipe .box .recipe_list{
	width: 55%;
	float: right;
}
.recipe .box .recipe_list h4{
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 15px;
}
.recipe .box .recipe_list dd{
	position: relative;
	padding-left: 35px;
	margin-bottom: 35px;
	font-size: 14px;
}
.recipe .box .recipe_list dd span{
	display: inline-block;
	line-height: 25px;
	width: 25px;
	height: 25px;
	border-radius: 12.5px;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
}
.recipe .box li.spring .recipe_list dd span{ background-color:#f5b8bb;}
.recipe .box li.summer .recipe_list dd span{ background-color:#aed581;} 
.recipe .box li.autumn .recipe_list dd span{ background-color:#fbc02d;} 
.recipe .box li.winter .recipe_list dd span{ background-color:#80deea;} 

.recipe .btnRecipeTop{
	text-align: center;
	margin: 60px 0;
}
.recipe .btnRecipeTop a{
	display: inline-block;
	text-align: center;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	padding: 15px 35px;
	background-color: #8d6e63;
	border-radius: 5px;
	box-shadow: 0px 3px 1px #73544a;
	transition: .7s;
}
.recipe .btnRecipeTop a:hover{
	opacity: 0.7;
}

@media only screen and (min-width: 0px) and (max-width: 768px){
	/*------------------------------
			mv
	---------------------------------*/

	.recipe #mv{
		background: url(../images/recipe/mv_bg.jpg) no-repeat center center;
		background-size: cover;
		height: auto;
		padding: 50px 5%;
		width: auto;
		display: block;
	}
	.recipe #mv h2{
		margin-bottom: 15px;
		width: 280px;
	}

	/*------------------------------
			contents
	---------------------------------*/
	
	.recipe #contents{
		background: url(../images/recipe/bg.jpg) no-repeat center 0;
		background-size: cover;
		padding: 50px 5% 40px;
		overflow: hidden;
	}

	.recipe #contents .inner{
		max-width: 100%;
		margin: 0 auto;
	}
	.recipe .tab{
		overflow: hidden;
		background-color: #fff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.recipe .tab ul{
		overflow: hiddenl;
		margin-left: -3%;
	}
	.recipe .tab li{
		width: 47%;
		float: left;
		height: 60px;
		line-height: 55px;
		font-size: 15px;
		margin-left: 3%;
	}
	.recipe .tab li:first-child{
		width: 100%;
		margin-left: 0;
	}
	.recipe .tab li:nth-child(4),.recipe .tab li:nth-child(5){
		margin-top: -5px;
	}
	.recipe .thum{
		padding: 25px 25px 40px;
		margin: -5px 0 30px;
		position: relative;
		z-index: 2;
	}

	.recipe .thum p{
		margin-bottom: 5px;
		font-size: 10px;
		text-align: center;
	}
	.recipe .thum p span{
		display: inline-block;
		line-height: 1.2;
		height: 25px;
	}
	.recipe .thum .no_slider p{
		float: left;
		width: 50%;
		margin-left: 0;
	}
	.recipe .thum .no_slider p img{
		width: 100%;
	}

	.recipe .thum .btnNext{
		cursor: pointer;
		background: url(../images/recipe/btnNext.png) no-repeat center 0 #d7ccc8;
		background-size: 30px;
		height: 34px;
		position: absolute;
		top:auto;
		bottom:0;
		right: 0;
		margin-top: 0px;
		width: 120px;
		border-top-left-radius: 5px;
	}
	.recipe .thum .btnPrev{
		cursor: pointer;
		background: url(../images/recipe/btnPrev.png) no-repeat center 0 #d7ccc8;
		background-size: 30px;
		height: 34px;
		position: absolute;
		top:auto;
		bottom:0;
		left: 0;
		margin-top: 0px;
		width: 120px;
		border-top-right-radius: 5px;
	}
	
	.recipe .box{
		background-color: #fff;
		overflow: hidden;
		box-shadow: 0px 3px 1px #ccc;
		padding: 25px 25px;
	}
	.recipe .box li{
		clear: both;
	}

	.recipe .box .head{
		overflow: hidden;
		margin-bottom: 30px;
	}
	.recipe .box .head .pic{
		float: none;
		width: 100%;
		margin-bottom: 15px;
	}
	.recipe .box .head .textArea{
		overflow-x: hidden;
		zoom:1;
		padding-left: 0px;
	}
	.recipe .box .head .textArea h3{
		font-size: 14px;
		font-weight: 600;
		border-top: 1px solid #ddc3ac;
		border-bottom: 1px solid #ddc3ac;
		padding: 10px 5px 7px;
	}
	.recipe .box .head .textArea p.num{
		text-align: right;
		margin: 10px 0 15px;
		font-size: 12px;
	}
	.recipe .box .head .textArea p.txt{
		margin-bottom: 35px;
		font-size:14px;
	}
	.recipe .box .head .textArea .arrange{
	}
	.recipe .box .head .textArea .arrange img{
		width: 60%;
		float: left;
	}
	.recipe .box .head .textArea .arrange i{
		float: left;
		width: 30%;
		margin-left: 5%;
	}
	.recipe .box .head .textArea .arrange i img{
		float: none;
		width: 100%;
	}

	.recipe .box .material{
		width: 100%;
		float: none;
		margin-bottom: 30px;
	}
	.recipe .box .material h4{
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 5px;
	}
	.recipe .box .material table{
		width: 100%;
		border-top: 1px solid;
		border-left: 1px solid;
	}
	.recipe .box .material table th{
		padding: 5px 10px;
		font-size: 12px;
		border-bottom: 1px solid;
		border-right: 1px solid;
	}
	.recipe .box .material table td{
		padding: 5px 10px;
		font-size: 12px;
		text-align: center;
		border-bottom: 1px solid;
		border-right: 1px solid;
	}
	
	.recipe .box .recipe_list{
		width: 100%;
		float: none;
	}
	.recipe .box .recipe_list h4{
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 5px;
	}
	.recipe .box .recipe_list dd{
		position: relative;
		padding-left: 30px;
		margin-bottom: 15px;
		font-size: 13px;
	}
	.recipe .box .recipe_list dd span{
		display: inline-block;
		line-height: 20px;
		width: 20px;
		height: 20px;
		border-radius: 12.5px;
		color: #fff;
		font-weight: 600;
		font-size: 11px;
		text-align: center;
		position: absolute;
		top: 2px;
		left: 0;
	}
	.recipe .box li.spring .recipe_list dd span{ background-color:#f5b8bb;} 

	.recipe .btnRecipeTop{
		text-align: center;
		margin: 60px 0;
	}
	.recipe .btnRecipeTop a{
		display: inline-block;
		text-align: center;
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		padding: 10px 35px;
		background-color: #8d6e63;
		border-radius: 5px;
		box-shadow: 0px 3px 1px #73544a;
		transition: .7s;
	}
	
}