@charset "utf-8";
/* CSS Document */
header {
	width: 100%;
	max-width: 1920px;
	height: 200px;
	margin: 0 auto;
}
#HeaderForm {
	width: 100%;
	height: 200px;
	max-width: 1600px;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
}
#Logo {
	width: 84px;
	height: 96px;
	margin-top: 60px;
	position:absolute;
	z-index: 10000;
	left: 158px;
}
#ProductsMenu {
	width: 200px;
	height: 1720px;
	position: absolute;
	background: #f2eee9;
	transition: all .5s;
}
#ProMenu {
	width: 200px;
	top: calc(100vh - 400px);
	left: 10px;
	position: absolute;
}
.ProMenuList {
	cursor: pointer;
}
.ProMenuLine {
	width: 20px;
	height: 25px;
	border-bottom: 1px solid #b7a393;
	float: right;
	margin-right: 10px;
}
.ProMenuName {
	width: 160px;
	height: 50px;
	line-height: 50px;
	color: #b7a393;
	text-align: right;
	float: left;
}
.ProMenuAct .ProMenuName {
	color: #8f3834;
	font-weight: 500;
}
.ProMenuAct .ProMenuLine {
	width: 30px;
	margin-right: 0px;
	border-color: #8f3834;
}
#Detail {
	width: calc(100% - 200px);
	max-width: 1260px;
	margin: 0 auto;
	min-height: 500px;
	background: url("/en/Assets/Web/Images/ProductsDetail/DetailFont.png") no-repeat left top;
}
#Detail:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
#DetailForm {
	width: 100%;
	max-width: 1100px;
	float: right;
}
#DetailForm:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
#DetailImg {
	width: calc(50%);
	max-width: 500px;
	float: left;
}
#DetailImg:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
#DetailText {
	width: calc(100% - 500px);
	float: right;
	background: url("/en/Assets/Web/Images/ProductsDetail/Line2.png") left top no-repeat;
	padding-left: 30px;
	box-sizing: border-box;
}
#DetailText:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
#TextContent {
	width: 100%;
	max-width: 500px;
	float: right;
}
#TextContent:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
#ProTitle {
	width: calc(100% - 60px);
	height: 120px;
	line-height: 40px;
	font-size: 28px;
	letter-spacing: 1px;
	font-weight: 500;
	padding-top: 30px;
	box-sizing: border-box;
}
#Weight {
	width: 50px;
	height: 110px;
	line-height: 100px;
	float: right;
	color: #8c8c8c;
}
#ProRight {
	width: 100%;
	height: 350px;
	overflow: hidden;
	overflow-y: auto;
}
#ProDec {
	width: 100%;
	min-height: 110px;
	color: #b7a393;
	font-style: italic;
	letter-spacing: 1px;
	font-size: 18px;
	line-height: 30px;
}
#ProText {
	width: 100%;
	min-height: 240px;
	line-height: 30px;
	font-weight: 300;
	padding-bottom: 0px;
	overflow: hidden;
	overflow-y: auto;
}
#ProInfo {
	width: 100%;
	height: 80px;
	border: 1px solid #c8c8c8;
	border-left: none;
	border-right: none;
	overflow: hidden;
}
#ProInfoText {
	width: calc(100% - 100px);
	height: 80px;
	line-height: 80px;
	padding-left: 20px;
	color: #c8c8c8;
	float: left;
}
#BtnProInfo {
	width: 30px;
	height: 30px;
	background: url("/en/Assets/Web/Images/ProductsDetail/BtnUp.png") no-repeat center center;
	cursor: pointer;
	float: right;
	margin-top: 20px;
	margin-right: 20px;
	transition: all .5s;
}
.BtnProDown {
	transform: rotate(180deg);
}
#ShowImg {
	width: 100%;
	max-width: 430px;
	height: 430px;
	float: left;
	text-align: center;
}
#ShowImg:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
#ShowImg img {
	max-width: 100%;
	max-height: 430px;
}
#ProImgList {
	width: 100%;
	max-width: 430px;
	height: 100px;
	padding-top: 30px;
	text-align: center;
	float: left;
}
#ProImgList:after {
	content: '';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
.SmallImg {
	width: 100px;
	height: 100px;
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0 auto;
}
.SmallImg img {
	height: 100px;
}
#BtnImgBack {
	width: 100%;
	height: 50px;
	float: left;
	padding-top: 70px;
	padding-left: 60px;
}
#BtnBuyForm {
	width: 100%;
	height: 100px;
	padding-top: 70px;
}
#Ingredient {
	width: 100%;
	margin-top: 80px;
	padding-left: 20px;
	padding-right: 65px;
	box-sizing: border-box;
}
#IngText {
	width: 100%;
	min-height: 90px;
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 30px;
	font-weight: 200;
	border-bottom: 1px solid #c8c8c8;
}
#IngInfo {
	width: 100%;
	letter-spacing: 1px;
	font-size: 15px;
	font-weight: 300;
}
.InfoList {
	width: 100%;
	height: 35px;
	line-height: 35px;
	border-bottom: 2px dashed #c8c8c8;
}
.ListLeft {
	line-height: 35px;
	float: left;
}
.ListRight {
	line-height: 35px;
	float: right;
}
.NoBorder {
	border: none;
}
.Border1 {
	border-bottom: 1px solid #c8c8c8;
}
#InfoBottom {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 25px;
	font-weight: 200px;
	font-size: 15px;
}
#Cook {
	width: calc(100% - 20px);
	height: 280px;
	float: right;
	margin-top: 90px;
	padding-left: 30px;
	box-sizing: border-box;
	overflow: hidden;
}
.CookList {
	width: calc((100% / 3) - 4px);
	height: 280px;
	display: inline-block;
}
.CookImg {
	width: 280px;
	height: 280px;
	margin: 0 auto;
	cursor: pointer;
}
.CookImg img {
	max-width: 100%;
}
#Line {
	width: 100%;
	height: 20px;
	background: url("/en/Assets/Web/Images/ProductsDetail/Line.png") no-repeat center center;
	float: left;
	margin-top: 150px;
}
#BtnBackForm {
	width: 100%;
	height: 150px;
	float: left;
	text-align: center;
	padding-top: 100px;
}
.FloatLeft {
	float: left;
}
.FloatRight {
	float: right;
}
.CookText {
	width: 280px;
	height: 280px;
	position: absolute;
	background: rgba(0, 0, 0, 0.40);
	box-sizing: border-box;
	padding-left: 20px;
	padding-top: 200px;
	color: #FFF;
	line-height: 30px;
	letter-spacing: 1px;
	font-size: 18px;
	opacity: 0;
	transition: all .5s;
	cursor: pointer;
}
.CookText:hover {
	opacity: 1;
	transition: all .5s;
}
#Cooking {
	width: 100%;
	max-width: 1040px;
	background: #f0f0f0;
	padding: 40px;
	box-sizing: border-box;
	float: right;
	margin-top: 90px;
	padding-bottom: 50px;
	display: none;
}
#CookingForm {
	width: calc(100% - 70px);
	overflow: hidden;
}
.CookingBox {
	width: 100%;
	float: left;
	display: none;
	overflow: hidden;
}
.CookingBox:after {
	content: '';
	clear: both;
	height: 0;
	display: block;
}
#CookingList {
	width: 100%;
}
#CookingList:after {
	content: '';
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}
#BtnCookingClose {
	width: 31px;
	float: right;
	cursor: pointer;
}
.CookingImg {
	width: 100%;
}
.CookingImg img {
	max-width: 100%;
}
.CookingInfo {
	width: 100%;
	padding-top: 40px;
}
.CookingInfo:after {
	content: '';
	clear: both;
	display: block;
	visibility: hidden;
}
.CookingLeft {
	width: 320px;
	float: left;
	margin-left: 50px;
}
.CookingTitle {
	width: 100%;
	height: 80px;
	color: #b7a393;
	font-size: 28px;
	line-height: 40px;
}
.Ingredients {
	width: 100%;
	height: 50px;
	padding-top: 40px;
	color: #6e6e6e;
	letter-spacing: 1px;
}
.IngText {
	width: 100px;
	height: 20px;
	background: #f0f0f0;
	float: left;
	z-index: 100;
}
.IngLine {
	width: 190px;
	height: 10px;
	float: right;
	border-bottom: 1px solid #c8c8c8;
}
.IngDec {
	width: 100%;
	height: 150px;
	line-height: 30px;
	letter-spacing: 1px;
	font-weight: 200;
}
.IngImg {
	width: 100%;
}
.CookingRight {
	width: calc(100% - 430px);
	float: right;
}
.Steps {
	width: calc(100%);
	height: 30px;
	color: #6e6e6e;
	letter-spacing: 1px;
	padding-top: 10px;
}
.StepsText {
	width: 60px;
	height: 30px;
	padding-right: 10px;
	float: left;
	background: #f0f0f0;
}
.StepsLine {
	width: calc(100% - 70px);
	height: 10px;
	border-bottom: 1px solid #c8c8c8;
	float: right;
}
.CookStep {
	width: 100%;
	min-height: 60px;
}
.CookStep:after {
	content: '';
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}
.StepNum {
	width: 60px;
	min-height: 60px;
	line-height: 60px;
	text-align: center;
	color: #b7a393;
	font-family: 'Libre Franklin', sans-serif;
	font-style: italic;
	font-size: 28px;
	font-weight: 300;
	float: left;
	letter-spacing: 2px;
	box-sizing: border-box;
}
.CookStepText {
	width: calc(100% - 65px);
	min-height: 60px;
	line-height: 30px;
	padding-left: 20px;
	box-sizing: border-box;
	border-bottom: 2px dashed #c8c8c8;
	float: right;
	font-weight: 300;
	letter-spacing: 1px;
	padding-top: 15px;
	padding-bottom: 20px;
}
#BtnPrev {
	width: 30px;
	height: 40px;
	background: url("/en/Assets/Web/Images/ProductsDetail/BtnPrve.png") no-repeat center center;
	float: left;
	margin-left: -100px;
	cursor: pointer;
}
#BtnNext {
	width: 30px;
	height: 40px;
	background: url("/en/Assets/Web/Images/ProductsDetail/BtnNext.png") no-repeat center center;
	float: right;
	margin-right: -100px;
	cursor: pointer;
}
.NoBorderBottom {
	border-bottom: none;
}
/*
#ProRight{
	scrollbar-color:#dcdcdc #c8c8c8;
	scrollbar-width:20px;
	
}

::-webkit-scrollbar {
	width: 20px;
}
::-webkit-scrollbar-track {
	background-color: transparent;
}
::-webkit-scrollbar-thumb {
	background-color: #d6dee1;
	border-radius: 20px;
	border: 6px solid transparent;
	background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #a8bbbf;
}
*/
@media screen and (min-width:992px) and (max-width:1700px) {
	#Detail {
		width: calc(100% - 200px);
		max-width: 1260px;
		margin-left: 200px;
		background: #CCC;
		min-height: 500px;
		background: url("/en/Assets/Web/Images/ProductsDetail/DetailFont.png") no-repeat 30px top;
	}
}
@media screen and (min-width:992px) and (max-width:1400px) {
	#ShowImg {
		float: right;
	}
	#ProImgList {
		float: right;
	}
	#Detail {
		background: none;
	}
	#DetailForm {
		float: none;
		margin: 0 auto;
	}
	.CookList {
		padding-right: 30px;
		box-sizing: border-box;
	}
	#Cooking {
		width: calc(100% - 60px);
		margin-left: 30px;
		margin-right: 30px;
	}
	#BtnPrev {
		margin-left: -70px;
	}
	#BtnNext {
		margin-right: -70px;
	}
}
@media screen and (min-width:992px) and (max-width:1200px) {
	#Detail {
		background: none;
	}
	#Cook {
		padding-right: 10px;
		height: 250px;
	}
	.CookList {
		height: 250px;
	}
	.CookImg {
		width: 250px;
		height: 250px;
		margin: 0 auto;
		cursor: pointer;
	}
	.CookText {
		width: 250px;
		height: 250px;
	}
	#DetailImg {
		width: 50%;
	}
	#DetailText {
		width: 50%;
	}
	#ProductsMenu {
		height: 1690px;
	}
	.CookingLeft {
		margin-left: 0px;
	}
	.CookingRight {
		width: calc(100% - 340px);
	}
}
@media screen and (min-width:992px) {
	#FooterLineBg {
		width: 100%;
		max-width: 1920px;
		height: 25px;
		margin-top: -25px;
		background: url("/en/Assets/Web/Images/ProductsDetail/FooterBg.png") no-repeat center top;
		margin: 0 auto;
		position: absolute;
	}
	#DetailText {
		padding-right: 20px;
		box-sizing: border-box;
	}
}
@media screen and (max-width: 991px) {
	article {
		overflow: hidden;
	}
	header {
		width: 100%;
		height: 75px;
		background: #f2eee9;
	}
	#Logo {
		width: 58px;
		height: 65px;
		margin-top: 30px;
		left: 35px;
	}
	#Logo img {
		width: 58px;
	}
	#Detail-Mb {
		width: 100%;
		padding: 30px;
		box-sizing: border-box;
	}
	#TitleName-Mb {
		width: 100%;
		height: 60px;
		margin-bottom: 20px;
		background: url("/en/Assets/Web/Images/ProductsDetail/PRODUCTS-Mb.png") center center no-repeat;
	}
	#DetailImg-Mb {
		width: 100%;
		height: 350px;
	}
	#HPage {
		width: 50px;
		height: 25px;
		line-height: 25px;
		text-align: center;
		position: absolute;
		right: 40px;
		z-index: 100;
		color: #c8c8c8;
		background: #f0f0f0;
		border-radius: 11px;
		margin-top: 260px;
		z-index: 100;
	}
	.ShowImg-Mb {
		width: calc(100% - 60px);
		height: 296px;
		text-align: center;
		position: absolute;
		text-align: center;
		display: none;
	}
	.ShowImg-Mb img {
		max-width: 100%;
		max-height: 296px;
		margin: 0 auto;
	}
	#Line1-Mb {
		width: 100%;
		height: 10px;
		border-top: 1px solid #c8c8c8;
	}
	#Icon-Mb {
		width: 50px;
		height: 36px;
		background: url("/en/Assets/Web/Images/ProductsDetail/Icon-Mb.png") center center no-repeat;
		background-color: #FFF;
		margin: 0 auto;
		margin-top: -18px;
	}
	#ProductsName-Mb {
		width: 100%;
		min-height: 80px;
		line-height: 40px;
		font-size: 20px;
		letter-spacing: 1px;
		text-align: center;
		padding-top: 30px;
	}
	#Weight-Mb {
		width: 100%;
		height: 80px;
		line-height: 60px;
		color: #8c8c8c;
		text-align: center;
	}
	#ProAction-Mb {
		overflow: hidden;
	}
	#ProDec {
		width: 100%;
		min-height: 110px;
		color: #b7a393;
		font-style: italic;
		letter-spacing: 1px;
		font-size: 18px;
		line-height: 30px;
		text-align: center;
		padding-bottom: 25px;
	}
	#ProText-Mb {
		width: 100%;
		min-height: 230px;		
		font-weight: 300;
		padding-bottom: 0px;
		overflow: hidden;
		overflow-y: auto;
		font-weight: 200;
		font-size: 14px;
		line-height: 25px;
		text-align: center;
	}
	#ProInfo-Mb {
		width: 100%;
		height: 70px;
		border: 1px solid #c8c8c8;
		border-left: none;
		border-right: none;
		overflow: hidden;
	}
	#ProInfoText-Mb {
		width: calc(100% - 100px);
		height: 70px;
		line-height: 70px;
		padding-left: 20px;
		color: #c8c8c8;
		float: left;
		font-size: 14px;
		font-weight: 200;
	}
	#BtnProInfo-Mb {
		width: 30px;
		height: 30px;
		background: url("/en/Assets/Web/Images/ProductsDetail/BtnUp.png") no-repeat center center;
		cursor: pointer;
		float: right;
		margin-top: 20px;
		margin-right: 20px;
		transition: all .5s;
	}
	.BtnProDown {
		transform: rotate(180deg);
	}
	#Ingredient-Mb {
		width: 100%;
		margin-top: 80px;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	#IngText-Mb {
		width: 100%;
		min-height: 90px;
		letter-spacing: 1px;
		font-size: 14px;
		line-height: 25px;
		font-weight: 200;
		border-bottom: 1px solid #c8c8c8;
	}
	#IngInfo-Mb {
		width: 100%;
		font-size: 15px;
		font-weight: 300;
	}
	.InfoList-Mb {
		width: 100%;
		height: 35px;
		line-height: 35px;
		border-bottom: 2px dashed #c8c8c8;
		font-size: 12px;
	}
	.ListLeft-Mb {
		line-height: 35px;
		float: left;
	}
	.ListRight-Mb {
		line-height: 35px;
		float: right;
	}
	#InfoBottom-Mb {
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
		line-height: 25px;
		font-weight: 200px;
		font-size: 14px;
	}
	#BtnBuyForm-Mb {
		width: 100%;
		height: 100px;
		text-align: center;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#BtnBuy-Mb {
		width: 188px;
		height: 35px;
		text-align: center;
		margin: 0 auto;
	}
	#BtnBuy-Mb img {
		max-width: 100%;
	}
	#CookingTitle-Mb {
		width: 100%;
		height: 80px;
		background: url("/en/Assets/Web/Images/ProductsDetail/CookingTitle-Mb.png") center center no-repeat;
		margin-top: 30px;
	}
	#Cook-Mb {
		width: 280px;
		height: 280px;
		overflow: hidden;
		margin: 0 auto;
	}
	#CookForm-Mb {
		height: 280px;
		position: relative;
	}
	.CookList-Mb {
		width: 280px;
		height: 250px;
		float: left;
	}
	.CookImg-Mb {
		width: 250px;
		margin: 0 auto;
	}
	.CookImg-Mb img {
		max-width: 250px;
	}
	.CookText-Mb {
		width: 250px;
		height: 70px;
		position: absolute;
		box-sizing: border-box;
		margin-top: 0;
		margin-top: 180px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		color: #FFF;
		line-height: 25px;
		background: rgba(0, 0, 0, 0.49);
	}
	#Line-Mb {
		width: calc(100% - 60px);
		height: 20px;
		background: url("/en/Assets/Web/Images/ProductsDetail/Line.png") no-repeat center center;
		background-size: 600px;
		margin-top: 80px;
		margin-left: 30px;
	}
	#BtnBackForm-Mb {
		width: 100%;
		height: 100px;
		float: left;
		text-align: center;
		padding-top: 60px;
	}
	#BtnBackForm-Mb img {
		width: 180px;
	}
	#Cooking-Mb {
		width: calc(100% - 60px);
		margin: 30px;
		background: #f0f0f0;
		padding: 20px;
		box-sizing: border-box;
		display: none;
	}
	#BtnCookingClose-Mb {
		float: right;
	}
	#CookingForm-Mb {
		width: 100%;
	}
	.CookingInfo-Mb {
		width: 100%;
		padding-bottom: 20px;
	}
	.CookingBox-Mb {
		width: 100%;
		display: none;
	}
	.CookingImg-Mb {
		margin-top: 50px;
	}
	.CookingImg-Mb img {
		max-width: 100%;
	}
	.CookingTitle-Mb {
		width: 100%;
		height: 80px;
		color: #b7a393;
		font-size: 20px;
		line-height: 30px;
		text-align: center;
		padding-top: 30px;
	}
	.Ingredients-Mb {
		width: 100%;
		height: 50px;
		padding-top: 40px;
		color: #6e6e6e;
	}
	.IngText-Mb {
		width: 100px;
		min-height: 20px;
		background: #f0f0f0;
		float: left;
		z-index: 100;
		font-size: 14px;
	}
	.IngLine-Mb {
		width: calc(100% - 105px);
		height: 10px;
		float: right;
		border-bottom: 1px solid #c8c8c8;
	}
	.IngDec-Mb {
		width: 100%;
		line-height: 25px;
		font-weight: 200;
		font-size: 14px;
	}
	.Steps-Mb {
		width: 100%;
		height: 30px;
		padding-top: 20px;
	}
	.StepsText-Mb {
		width: 50px;
		height: 30px;
		padding-right: 10px;
		float: left;
		box-sizing: border-box;
		font-size: 14px;
		color: #6e6e6e;
	}
	.StepsLine-Mb {
		width: calc(100% - 55px);
		height: 10px;
		border-bottom: 1px solid #c8c8c8;
		float: right;
	}
	.CookStep-Mb {
		width: 100%;
		min-height: 50px;
	}
	.CookStep-Mb:after {
		content: '';
		clear: both;
		height: 0;
		display: block;
		visibility: hidden;
	}
	.StepNum-Mb {
		width: 60px;
		min-height: 50px;
		line-height: 48px;
		text-align: center;
		color: #b7a393;
		font-family: 'Libre Franklin', sans-serif;
		font-style: italic;
		font-size: 18px;
		font-weight: 300;
		float: left;
		letter-spacing: 2px;
	}
	.CookStepText-Mb {
		width: calc(100% - 65px);
		min-height: 50px;
		line-height: 25px;
		padding-left: 10px;
		box-sizing: border-box;
		border-bottom: 1px dashed #c8c8c8;
		float: right;
		font-weight: 300;
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 14px;
	}
	.IngImg-Mb {
		width: 100%;
	}
	.IngImg-Mb img {
		max-width: 100%;
	}
	.NoBorder {
		border: none;
	}
}
@media screen and (max-width: 350px) {
	#Ingredient-Mb {
		width: 100%;
		margin-top: 80px;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
	}
}