﻿/* 版一共同架構設定 */
	html,body{
		background: #f5f6f9;
		width: 100%;
		color: #3b065d;
		font-family: Microsoft JhengHei;
		font-size: 4.2vw;
	}
	body{
		background: url("../images/all/bgTop.png") no-repeat left top #f5f6f9;
		background-size: contain;
		padding-top: 35px;
	}
	@media (min-width: 700px) {
		body{
			background: url("../images/all/bgTop.png") no-repeat center top #f5f6f9;
			background-size: 700px;
		}
	}
	.logo{
		position: relative;
	    z-index: 1;
		width: 50%;
		max-width: 350px;
		display: block;
		margin: 0 auto 24px auto;
	}
	section{
		position: relative;
		z-index: 1;
		padding: 0 8%;
		box-sizing: border-box;
	}
	h2{
		font-size: 6vw;
		margin-bottom: 20px;
		font-weight: bold;
		background: url('../images/all/titleFlower.png') no-repeat right bottom;
		background-size: contain;
		display: table;
		padding-right: 9vw;
		box-sizing: border-box;
	}
	div{
		line-height: 1.5;
	}
	p{
		color: #333333;
	}
	a{
		font-size: 4.2vw;
		outline: none; /* for Firefox Google Chrome  */
      	behavior:expression(this.onFocus=this.blur()); /* for IE */
	}
	input{
		font-family: Microsoft JhengHei;
		font-size: 4.2vw;
	}
	.wrap {
		position: relative;
		max-width: 700px;
		margin: 0 auto;
	}
	.wrap .content {
		min-height: 52vh;
		position: relative;
		z-index: 1;
	}
	.fontBold{
		font-weight: bold;
	}
	.bottomBg{
		z-index: 0;
		margin-top: -90px;
		width: 100%;
	}
	section button.submitButton{
		background: -webkit-linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	    background: linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	    color: #FFF;
	    display: block;
	    width: 100%;
	    padding: 12px 0;
	    text-align: center;
	    border-radius: 100em;
	    text-decoration: none;
		margin-top: 6vw;
		border: 0;
	}
	section button.confirmButton{
		background: -webkit-linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
		background: linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
	    color: #FFF;
	    display: block;
	    width: 100%;
	    padding: 12px 0;
	    text-align: center;
	    border-radius: 100em;
	    text-decoration: none;
	    margin-top: 6vw;
	}
	section button.cancelButton{
		background: -webkit-linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
		background: linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
	    color: #FFF;
	    display: block;
	    width: 100%;
	    padding: 12px 0;
	    text-align: center;
	    border-radius: 100em;
	    text-decoration: none;
	    margin-top: 6vw;
	}
	section button.clearButton {
		text-align: center;
		margin: 0 auto;
		display: block;
		font-size: 4vw;
		color: #3b065d;
		background: none;
		margin-top: 6vw;
	}
	section a.submitButton{
		background: -webkit-linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	    background: linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	    color: #FFF;
	    display: block;
	    width: 100%;
	    padding: 12px 0;
	    text-align: center;
	    border-radius: 100em;
	    text-decoration: none;
	    margin-top: 6vw;
	}
	section a.confirmButton{
		background: -webkit-linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
		background: linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
	    color: #FFF;
	    display: block;
	    width: 100%;
	    padding: 12px 0;
	    text-align: center;
	    border-radius: 100em;
	    text-decoration: none;
	    margin-top: 6vw;
	}
	section a.cancelButton{
		background: -webkit-linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
		background: linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
	    color: #FFF;
	    display: block;
	    width: 100%;
	    padding: 12px 0;
	    text-align: center;
	    border-radius: 100em;
	    text-decoration: none;
	    margin-top: 6vw;
	}
	section a.clearButton {
		text-align: center;
		margin: 0 auto;
		display: block;
		font-size: 4vw;
		color: #3b065d;
		background: none;
		margin-top: 6vw;
	}
	.allBoxShadow,
	.owl-carousel .owl-nav button.owl-prev,
	.owl-carousel .owl-nav button.owl-next{
		/* box-shadow: rgba(59, 6, 93, 0.08) 0px 1px 5px; */
		/* box-shadow: rgba(59, 6, 93, 0.08) 2px 4px 5px; */
		box-shadow: rgba(59, 6, 93, 0.08) 3px 4px 14px;
		-webkit-appearance: none;
	}
	/* 運算 */
		section .Operation{
			display: table;
			width: 100%;
		    text-align: center;
		}
		section .Operation.cart {
			text-align: left;
		}
		section .Operation input{
			display: inline;
			vertical-align: middle;
			border: 0;
			border-radius: 100em;
			width: 40px;
			height: 40px;
			color: #FFF;
			font-size: 6vw;
		}
		section .Operation.cart input {
			width: 35px;
			height: 35px;
		}
		section .Operation input.minButton{
			background:url('../images/all/minButton.png') center no-repeat,linear-gradient(left,#bfc5d5,#97a0b5);
			background:url('../images/all/minButton.png') center no-repeat,-moz-linear-gradient(left,#bfc5d5,#97a0b5);
			background:url('../images/all/minButton.png') center no-repeat,-webkit-linear-gradient(left,#bfc5d5,#97a0b5);
			padding: 15px;
			box-sizing: border-box;
			background-size: contain;
		}
		section .Operation input.addButton{
			background:url('../images/all/addButton.png') center no-repeat,linear-gradient(left,#8c44b2,#694ab8);
			background:url('../images/all/addButton.png') center no-repeat,-moz-linear-gradient(left,#8c44b2,#694ab8);
			background:url('../images/all/addButton.png') center no-repeat,-webkit-linear-gradient(left,#8c44b2,#694ab8);
			padding: 15px;
			box-sizing: border-box;
			background-size: contain;
		}
		section .Operation input.textBox{
			text-align: center;
			color: #333333;
			background: none;
			width: 50px;
			height: 50px;
			margin: 0 10px;
		}
		section .Operation.cart input.textBox{
			width: 30px;
			height: 30px;
			margin: 0 5px;
		}
		input.deleteButton {
			display: inline;
			vertical-align: middle;
			border: 0;
			border-radius: 100em;
			width: 35px;
			height: 35px;
			color: #FFF;
			font-size: 6vw;
			background:url('../images/all/del.png') center no-repeat #fff;
			padding: 15px;
			box-sizing: border-box;
			background-size: contain;
		}
	
/* VIP積點紀錄 */
	section.pointRecord ul.pointRecordItem{
		width: 100%;
		background: url('../images/all/boderLighter.png') no-repeat bottom center;
		background-size: contain;
		overflow: hidden;
	    margin-bottom: 20px;
	    padding-bottom: 20px;
	}
	section.pointRecord ul.pointRecordItem li{
		width: 50%;
		float: left;
	}
	section.pointRecord .title{
		text-align: center;
		color: #9f8e66;
		font-weight: bold;
		font-size: 5.3vw;
		margin-bottom: 2vw;
	}
	section.pointRecord ul.pointRecordItem li.pointTime {
		width: 100%;
		margin: 5px auto 0;
	}
	section.pointRecord ul.pointRecordItem li.pointTime .topic{
		display: inline-block;
		margin: 0 5px 0 0;
	}
	section.pointRecord ul.pointRecordItem li.pointTime span {
		color: #333;
	}
	section.pointRecord .pointRecordList .item{
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		border-bottom: 1px solid rgba(138,138,138,.35);
	}
	section.pointRecord .pointRecordList .item .list-title .date{
		font-size: 3.4vw;
		color: #8a8a8a;
	}
	section.pointRecord .pointRecordList .item .point span {
		font-weight: bold;
		font-size: 5vw;
	}
	section.pointRecord .pointRecordList .item .point span.iconPoint {
		background: #5d4cba;
		color: #fff !important;
		display: inline-block;
		text-align: center;
		width: 5.6vw; height: 5.6vw;
		border-radius: 50%;
		margin-right: 5px !important;
		font-size: 3.6vw;
	}
	
/* 會員專屬預購 */
	section.preOrder .title {
		font-size: 5.3vw;
	}
	section.preOrder div span{
		color: #333333;
		font-weight: normal;
		margin: 0 0 0 10px;
	}
	section.preOrder .Operation {
		margin: 10px 0 0;
	}
	section.preOrder .Button{
		overflow: hidden;
	    clear: both;
	    padding-top: 20px;
	}
	section.preOrder .Button a{
		width: 100%;
		display: block;
		text-align: center;
		padding: 9px 0;
		box-sizing: border-box;
		color: #FFF;
		text-decoration: none;
	    border-radius: 100em;
	    background: -webkit-linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
		background: linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
	}
	section.preOrder .productPic{
		margin: 7vw 0 3vw 0;
	}

/* 會員登入 */
	section.signIn h2{
	    margin: 0 auto 15px auto;
	    background: url('../images/all/titleFlower.png') no-repeat right bottom,
	    			url('../images/all/titleFlowerLeft.png') no-repeat left bottom;
		background-size: contain;
		padding: 0 9vw;
	}
	section.shareIn h2{
	    margin: 0 auto 15px auto;
	    background: url('../images/all/titleFlowerShare.png') no-repeat top center;
		background-size: 100%;
		padding: 4vw 8vw;
		text-align: center;
		font-size: 4.8vw;
	}
	section.signIn p.tips{
		text-align: center;
		color: #8a8a8a;
		font-size: 4vw;
		margin-bottom: 20px;
		line-height: 1.4;
	}
	section.signIn p.tips span {
		display: block;
		margin: 0 auto 10px;
		padding: 8px 0;
		border: 1px solid #ccc;
	}
	section.signIn p.tips.bottom{
		margin-top: 20px;
	}
	section.signIn .tips {
		margin-top: 10px;
	}
	section.signIn.signInInfo div{
		font-weight: bold;
	}
	section.signIn.signInInfo input{
		border-radius: 5px;
		border: 0;
		background: #FFF;
		padding: 10px;
		box-sizing: border-box;
		width: 100%;
		margin-top: 10px;
	}
	section.signIn.signInInfo input{
		margin-bottom: 15px;
	}
	section.signIn.signInInfo input:last-of-type{
		/* margin-bottom: 0; */
	}
	section.signIn .forgetPassword{
		overflow: hidden;
		margin-top: 3px;
	}
	section.signIn .forgetPassword a{
		color: #333333;
		float: right;
		font-weight: normal;
	}	
	section.signIn .resendVerification{
		overflow: hidden;
		margin-top: 3px;
		text-align: center;
	}
	section.signIn .resendVerification a{
		color: #333333;
		font-weight: normal;
	}
	section.signInFail {
		display: flex;
		justify-content: space-between;
	}
	section.signInFail a, section.signInFail button{
		width: 48% !important;
	}
	.register-store.modern-forms .field-group {
		width: 100%;
	}
	.reservation.modern-forms .field-group {
		width: 100%;
	}

/* 會員資料編輯 */
	section.infoEdit .barcode {
		margin-bottom: 32px;
	}
	section.infoEdit ul{
		overflow: hidden;
		margin-bottom: 25px;

	}
	section.infoEdit ul li{
		width: 50%;
		float: left;
	}
	section.infoEdit ul li.boderLighter{
		width: 100%;
		overflow: hidden;
		margin: 20px 0;
	}
	section.infoEdit ul li.boderLighter img{
		width: 90%;
		margin: 10px auto 10px auto;
	}
	section.infoEdit div{
		font-weight: bold;
	}
	section.infoEdit .note {
		font-size: 3.4vw;
	}
	section.infoEdit input{
		border-radius: 5px;
		border: 0;
		background: #FFF;
		padding: 10px;
		box-sizing: border-box;
		width: 100%;
	}
	section.infoEdit input{
		margin-bottom: 15px;
	}
	.modern-forms .mdn-select>select{
		border: 0;
		font-size: 4.2vw;
		color: #8a8a8a;
		padding: 10px;
		box-sizing: border-box;
		height: auto;
	}
	.modern-forms .prepend-icon{
		width: 31.3%;
		display: inline-table;
		background: #FFF;
		border-radius: 5px;
	}
	.modern-forms .prepend-icon.centerSelect{
		margin: 0 1.5%;
	}
	.modern-forms .mdn-select:after{
		border-top-color: #3b065d;
		bottom: 3vw;
		right: 15px;
	}

/* 會員購物紀錄 */
	section.shoppingHistory h2 span{
	    color: #8a8a8a;
	    font-size: 3vw;
	}
	section.shoppingHistory.details{
		width: 90%;
		margin: 0 auto;
		border-bottom: 1px solid rgba(138,138,138,.35);
		overflow: hidden;
		border-radius: 0;
		padding: 15px 0;
		box-sizing: border-box;
		overflow: hidden;
		position: relative;
	}
	section.shoppingHistory.details ul.detailInfo{
		overflow: hidden;
	}
	section.shoppingHistory.details ul.detailInfo li{
		width: 62%;
		float: left;
		margin-bottom: 10px;
	}
	section.shoppingHistory.details ul.detailInfo li.price {
		width: 38%;
		font-size: 5vw;
		text-align: right;
		padding: 0 8vw 0 0;
		box-sizing: border-box;
		float: right;
	}
	section.shoppingHistory.details ul.detailInfo li.price p {
		color: #3b065d;
	}
	section.shoppingHistory.details ul.detailInfo .date {
		font-size: 3.4vw;
		color: #8a8a8a;
	}
	section.shoppingHistory.details ul.detailInfo .num {
		color: #3b065d;
	}
	section.shoppingHistory.details ul.detailInfo li p span.status {
		color: #fff;
		font-weight: normal;
		font-size: 3.2vw;
		background: #574242;
		margin-left: 5px;
		padding: 2px 6px;
		border-radius: 50px;
	}
	section.shoppingHistory.details ul.detailInfo li p span.processing{
		background: #de6aab;
	}
	section.shoppingHistory.details ul.detailInfo li p span.confirm{
		background: #673ab7;
	}
	section.shoppingHistory.details ul.detailInfo li p span.arrival{
		background: #419ce4;
	}
	section.shoppingHistory.details ul.detailInfo li p span.cancel{
		background: #5f5f5f;
	}
	section.shoppingHistory.details ul.detailInfo li p span.done{
		background: #5dc35d;
	}
	section.shoppingHistory .toggleMenu {
		position: absolute;
		right: 0; top: 20px;
	}
	section.shoppingHistory .toggleMenu span{
		font-size: 2vw;
		margin-left: 5px;
		transition: all 0.3s ease-out; 
    	transform: rotate(0deg);
	}
	section.shoppingHistory .toggleMenu span{
		width: 20px;
		height: 20px;
		display: inline-table;
		background: url("../images/all/arrow.png") no-repeat center;
		background-size: cover;
	}
	section.shoppingHistory .toggleMenu span.spin{
		-webkit-transform:rotate(180deg);
		transform:rotate(180deg);
	}

	section.shoppingHistory .toggleDetails{
		width: 100%;
		display: none;
	}
	section.shoppingHistory.details ul.productInfo,
	section.shoppingHistory.details ul.productInfo li{
		overflow: hidden;
		width: 100%;
		margin-bottom: 10px;
	}
	section.shoppingHistory.details ul.productInfo li:last-of-type{
		margin-bottom: 0;
	}
	section.shoppingHistory.details ul.productInfo li div.item01,
	section.shoppingHistory.details ul.productInfo li div.item02,
	section.shoppingHistory.details ul.productInfo li div.item03{
		float: left;
		line-height: 1;
	}
	section.shoppingHistory.details ul.productInfo li div.item01{
		width: 30%;
		padding-right: 10px;
		box-sizing: border-box;
	}
	section.shoppingHistory.details ul.productInfo li div.item02{
		width: 58%;
		padding-right: 5px;
		box-sizing: border-box;
	}
	section.shoppingHistory.details ul.productInfo li div.item02 span{
		color: #333333;
		font-weight: normal;
	}
	section.shoppingHistory.details ul.productInfo li div.item02 .price{
		margin-top: 7px;
	}
	section.shoppingHistory.details ul.productInfo li div.item03{
		width: 12%;
		text-align: center;
		padding: 3px 0 0;
	}
	section.shoppingHistory a.submitButton{
	    margin: 10px auto 0 auto;
	    display: table;
		width: auto;
		padding: 12px 10vw;
	}

/* 預約紀錄 */
	section.reserveHistory.details{
		width: 90%;
		margin: 0 auto;
		border-bottom: 1px solid rgba(138,138,138,.35);
		overflow: hidden;
		border-radius: 0;
		padding: 15px 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	section.reserveHistory.details ul.detailInfo{
		overflow: hidden;
	}
	section.reserveHistory.details ul.detailInfo li{
		width: 50%;
		float: left;
		margin-bottom: 10px;
	}
	section.reserveHistory.details ul.detailInfo .time {
		color: #3b065d;
	}
	section.reserveHistory.details ul.detailInfo .store {
		font-size: 3.4vw;
		color: #8a8a8a;
	}
	section.reserveHistory.details ul.detailInfo li.statuswrap {
		text-align: right;
	}
	section.reserveHistory.details ul.detailInfo li p span.status {
		color: #fff;
		font-weight: normal;
		font-size: 3.4vw;
		background: #5f5f5f;
		margin-left: 5px;
		padding: 2px 10px;
		border-radius: 50px;
	}
	section.reserveHistory.details ul.detailInfo li p span.absent{
		background: #e66942;
	}
	section.reserveHistory.details ul.detailInfo li p span.success{
		background: #419ce4;
	}
	section.reserveHistory.details ul.detailInfo li p span.done{
		background: #5dc35d;
	}
	section.reserveHistory.details ul.detailInfo li p span.cancel{
		background: #5f5f5f;
	}
	section.reserveHistory a.submitButton{
	    margin: 10px auto 0 auto;
	    display: table;
		width: auto;
		padding: 12px 10vw;
	}

	/* lightbox */
		.lightbox{
			display: none;
			width: 100%;
			height: 100vh;
			background: rgba(0,0,0,0.9);
			left: 0;
			top: 0;
			position: fixed;
			z-index: 9999;

		}
		.lightbox div.lightboxDiv{
			display: table;
			width: 100%;
			height: 100vh;
		}
		.lightbox div.verticalAlignMiddle{
			display: table-cell;
			vertical-align: middle;
		}
		.lightbox ul{
			width: 80%;
			margin: 0 auto;
			background: #FFF;
			border-radius: 10px;
			overflow: hidden;
			text-align: center;
		}
		.lightbox .title{
			margin: 20px auto;
		}
		.lightbox .checkButton{
			display: table;
			width: 100%;
		}
		.lightbox .checkButton .checkOK{
			    display: table-cell;
			width: 50%;
			color: #FFF;
			text-decoration: none;
			background: -webkit-linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
		    background: linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	        padding: 7px 5px;
	        box-sizing: border-box;
		}
		.lightbox .checkButton .checkCancel{
			display: table-cell;
			width: 50%;
			color: #FFF;
			text-decoration: none;
			background: -webkit-linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
			background: linear-gradient(90deg, rgb(191, 197, 213), rgb(151, 160, 181));
	        padding: 7px 5px;
	        box-sizing: border-box;
		}


section.signIn .captcha img {
	display: inline-block;
	width: 50%;
}
section.signIn .captcha input{
	display: inline-block;
	vertical-align: bottom;
	width: 60px;
	margin-left: 15px;
}
section.signIn .captcha input{
	border: 0;
	background:url("../images/all/refresh.png") center no-repeat,-webkit-linear-gradient(left,#8c44b2, #694ab8);
	background:url("../images/all/refresh.png") center no-repeat,-o-linear-gradient(left,#8c44b2, #694ab8);
	background:url("../images/all/refresh.png") center no-repeat,linear-gradient(left,#8c44b2, #694ab8);
	background-size: contain;
	border-radius: 100em;
	padding: 4px 8vw;
}

/* 忘記密碼 alert套件 */
.sendpwLightBox{
	position: fixed;
	z-index: 2;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.9);
	left: 0;
	top: 0;
	display: none;
}
.sendpwLightBoxDiv{
	width: 100%;
	height: 100vh;
	display: table;
}
.sendpwLightBox .pwBox{
	margin: 0 auto;
	display: table-cell;
	vertical-align: middle;
}
.sendpwLightBox .pwBox .pwBoxwrap {
	width: 80%;
	margin: 0 auto;
	background: #fff;
	word-break: break-all;
	color: #222;
	font-weight: 300;
	font-size: 3.8vw;
	padding: 15px;
}
.sendpwLightBox .checkOK{
	background: -webkit-linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	background: linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	color: #FFF;
	display: block;
	width: 90%;
	padding: 10px 0;
	text-align: center;
	border-radius: 100em;
	text-decoration: none;
	margin: 6vw auto 0 auto;
}

#reservationDate {
	width: 100%;
}
#reservationDate input {
	background: url("../images/all/calendar.png") no-repeat right center;
	background-size: contain;
}
#reservationDate .datepicker thead > tr:first-child {
	background: -webkit-linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	background: linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	color: #fff;
}
#reservationDate .datepicker thead, #reservationDate .datepicker th {
	border-radius: 0;
}
#reservationDate .datepicker .dow {
	color: #333;
}
#reservationDate .datepicker .day.old {
	color: #aaa;
}
#reservationDate table td.active,
#reservationDate table td.active:hover {
  background-color: #92308d;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
#reservationDate .bootstrap-datetimepicker-widget.dropdown-menu {
	padding: 0;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

/* 我的購物車 */
section.shoppingCart{
	width: 90%;
	margin: 10px auto;
	background: #FFF;
	overflow: hidden;
	border-radius: 5px;
	padding: 15px;
	box-sizing: border-box;
	overflow: hidden;
}
section.shoppingCart table {
	width: 100%;
}
section.shoppingCart table th {
	text-align: left;
}
section.shoppingCart table th, section.shoppingCart table td {
	padding: 2.5vw 0;
}
section.shoppingCart table tr td:nth-child(1){
	width: 23vw;
}
section.shoppingCart table tr th:nth-child(2), section.shoppingCart table tr td:nth-child(2){
	/* width: 32vw; */
	padding: 2.5vw 5px;
}
section.shoppingCart table tr td:nth-child(3){
	width: 33.5vw;
}
section.shoppingCart table tr td:nth-child(3) input.textBox {
	margin: 0;
	display: inline-block;
	width: 45px; height: 40px;
	font-size: 5.5vw;
}
section.shoppingCart table thead, section.shoppingCart table tbody tr {
	border-bottom: 1px solid rgba(138,138,138,.35);
}
section.shoppingCart table tbody tr:last-child {
	border-bottom: 2px solid #8b95ab;
}
section.shoppingCart .total-wrap {
	margin-top: 2.5vw;
}
section.shoppingCart .total-wrap .totalbox {
	display: flex;
	justify-content: flex-end;
	text-align: right;
}
section.shoppingCart .total-wrap .totalbox .title {
	width: 72%;
}
section.shoppingCart .total-wrap .totalbox .text {
	width: 28%;
}
section.shoppingCart .total-wrap .totalbox .title.total, section.shoppingCart .total-wrap .totalbox .text.total{
	font-size: 6vw;
}
section.shoppingCart .total-wrap .totalbox .text.total {
	color: #333;
}

/* 預購產品分類 */
.productCategory {
	margin: 0 auto;
	padding: 0 8%;
	box-sizing: border-box;
}
.productCategory ul.productInfo li {
	width: 100%;
	margin-bottom: 20px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}
.productCategory ul.productInfo li div.item01,
.productCategory ul.productInfo li div.item02,
.productCategory ul.productInfo li div.item03{
	line-height: 1;
}
.productCategory ul.productInfo li div.item01{
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 8px;
}
.productCategory ul.productInfo li div.item02{
	width: 70%;
	padding-right: 5px;
	box-sizing: border-box;
}
.productCategory ul.productInfo li div.item02 span{
	color: #333333;
	font-weight: normal;
}
.productCategory ul.productInfo li div.item02 .price{
	font-size: 6vw;
}
.productCategory ul.productInfo li div.item03{
	width: 30%;
	text-align: right;
}
.productCategory ul.productInfo li div.item03 input.addBtn {
	display: inline-block;
	vertical-align: bottom;
	width: 70px;
	border: 0;
	background:url("../images/all/addCart.png") center no-repeat,-webkit-linear-gradient(left,#8c44b2, #694ab8);
	background:url("../images/all/addCart.png") center no-repeat,-o-linear-gradient(left,#8c44b2, #694ab8);
	background:url("../images/all/addCart.png") center no-repeat,linear-gradient(left,#8c44b2, #694ab8);
	background-size: contain;
	border-radius: 100em;
	padding: 8px 8vw;
}
.shoppingCategory {
	display: flex;
	justify-content: space-between;
}
.shoppingCategory .gotoCart {
	display: block;
	width: 10vw;
	height: 10vw;
	position: relative;
}
.shoppingCategory .gotoCart.active::after {
	content: "";
	display: block;
	position: absolute;
	width: 1.8vw; height: 1.8vw;
	background: #e4007f;
	right: 0; top: 0;
	border-radius: 50%;
}


.scrollnav {
	box-sizing: border-box;
}
.scrollnav header, .scrollnav nav {
	font-size: 0;
}
.scrollnav header {
	overflow: hidden;
}
.scrollnav ul, .scrollnav li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.scrollnav .scroll::-webkit-scrollbar {
	display: none;
}
.scrollnav {
	padding: 0 7%;
	color: #64cce3;
	line-height: 1.5;
}
.scrollnav .slide-btn {
	width: 15%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	font-weight: 700;
	color: #3b065d;
	border: 1px solid #d0d0d3;
	padding: 13px 0 12px;
	transform: translateY(1px);
}
.scrollnav .nav {
	width: 85%;
}
.scrollnav .category-nav {
	border-bottom: 1px solid #d0d0d3;
	display: flex;
}
.scrollnav .scroll {
	white-space: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
.scrollnav .bg-grey {
	background-color: #727c87;
}
.scrollnav .vam,
.scrollnav .nav-item {
	display: inline-block;
	vertical-align: middle;
}
.scrollnav .vam {
	text-align: center;
	font-weight: 700;
	color: #727c87;
}
.scrollnav .nav-item {
	cursor: pointer;
	padding: 13px 16px 12px;
}
.scrollnav .nav-item.active {
	color: #6a4ab8;
	border-bottom: 2px solid #6a4ab8;
}
.scrollnav .submenu {
	height: 0;
	opacity: 0;
	border-left: 1px solid #d0d0d3;
	border-right: 1px solid #d0d0d3;
	border-bottom: 1px solid #d0d0d3;
	padding: 10px 10px 0;
}
.scrollnav .submenu .nav-item {
	border: 0;
	border-radius: 30px;
	background: #8b95ab;
	color: #fff;
	margin: 0 5px 10px;
	padding: 7px 15px;
}
.scrollnav .submenu .nav-item.active {
	background: #5e4cba;
}
.scrollnav .submenu.active {
	height: auto;
	opacity: 1;
}

.productPoint span{
	font-weight: bold;
	font-size: 5vw;
}
.productPoint span.iconPoint {
	background: #5d4cba;
	color: #fff !important;
	display: inline-block;
	text-align: center;
	width: 5.6vw; height: 5.6vw;
	border-radius: 50%;
	margin-right: 5px !important;
	font-size: 3.6vw;
}
.productText span{
	margin: 0 !important;
}

.pointTotal span{
	font-size: 9vw;
}
.pointTotal span.iconPoint {
	background: #5d4cba;
	color: #fff !important;
	display: inline-block;
	text-align: center;
	width: 5.6vw; height: 5.6vw;
	border-radius: 50%;
	margin-right: 5px !important;
	font-size: 3.6vw;
	vertical-align: middle;
}

.privacy-check label {
	display: inline-block;
	color: #8a8a8a;
	cursor: pointer;
	position: relative;
	font-weight: normal;
  }
  .privacy-check label span {
	display: inline-block;
	position: relative;
	background-color: transparent;
	width: 20px;
	height: 20px;
	transform-origin: center;
	border: 1px solid #8a8a8a;
	background: #fff;
	border-radius: 50%;
	vertical-align: -6px;
	margin-right: 10px;
	transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
  }
  .privacy-check label span:before {
	content: "";
	width: 0px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	position: absolute;
	transform: rotate(45deg);
	top: 11px;
	left: 7px;
	transition: width 50ms ease 50ms;
	transform-origin: 0% 0%;
  }
  .privacy-check label span:after {
	content: "";
	width: 0;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	position: absolute;
	transform: rotate(305deg);
	top: 14px;
	left: 8px;
	transition: width 50ms ease;
	transform-origin: 0% 0%;
  }
  .privacy-check label:hover span:before {
	width: 5px;
	transition: width 100ms ease;
  }
  .privacy-check label:hover span:after {
	width: 10px;
	transition: width 150ms ease 100ms;
  }
  
  .privacy-check input[type="checkbox"] {
	display: none;
  }
  .privacy-check input[type="checkbox"]:checked + label span {
	background-color: #fff;
	transform: scale(1.25);
  }
  .privacy-check input[type="checkbox"]:checked + label span:after {
	width: 10px;
	background: #8a8a8a;
	transition: width 150ms ease 100ms;
  }
  .privacy-check input[type="checkbox"]:checked + label span:before {
	width: 5px;
	background: #8a8a8a;
	transition: width 150ms ease 100ms;
  }
  .privacy-check input[type="checkbox"]:checked + label:hover span {
	background-color: #fff;
	transform: scale(1.25);
  }
  .privacy-check input[type="checkbox"]:checked + label:hover span:after {
	width: 10px;
	background: #8a8a8a;
	transition: width 150ms ease 100ms;
  }
  .privacy-check input[type="checkbox"]:checked + label:hover span:before {
	width: 5px;
	background: #8a8a8a;
	transition: width 150ms ease 100ms;
  }  

.form-radio p {
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 15px;
}
.form-radio [type="radio"]:checked,
.form-radio [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.form-radio [type="radio"]:checked + label,
.form-radio [type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
.form-radio [type="radio"]:checked + label:before,
.form-radio [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
.form-radio [type="radio"]:checked + label:after,
.form-radio [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #3b065d;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.form-radio [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.form-radio [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.share-title {
	text-align: center;
	font-size: 7vw;
	margin-bottom: 10px;
}
.shareWrap ul {
	padding-bottom: 20px;
	background: url("../images/all/boderLighter.png") no-repeat bottom center;
}
.shareWrap ul li {
	max-width: 40%;
	margin: 0 auto 5px;
}
.shareWrap ul li span{
	font-weight: normal;
	color: #8a8a8a;
	margin-left: 10px;
}

.gotoOrder {
	height: 8vw;
	margin-top: 1.5%;
	margin-right: -5%;
}

.meal-search {
	margin-bottom: 30px;
}
section.signIn p.meal-tip {
	margin-bottom: 10px;
}
.meal-search form{
	position: relative;
}
.meal-search form input {
	width: 100%;
	border-radius: 5px;
	border: 0;
	background: #fff;
	padding: 10px;
	box-sizing: border-box;
	margin-bottom: 0;
}
.meal-search .submitButton {
	position: absolute;
	right: 0; top: 0;
	margin-top: 0;
	background: -webkit-linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	background: linear-gradient(90deg, rgb(140, 68, 178), rgb(105, 74, 184));
	color: #FFF;
	display: block;
	width: 11vw; height: 100%;
	padding: 0;
	text-align: center;
	border-radius: 5px;
	text-decoration: none;
}
.meal-search .submitButton img {
	width: 6vw;
	margin: 0 auto;
}

.scrollnav .meal-nav {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.scrollnav .meal-nav a {
	font-size: 5.3vw;
}
.scrollnav .meal-nav .nav-item {
	padding: 13px 0 12px;
}

/* 飲食份量查詢 */
.mealCategory {
	margin: 0 auto;
	padding: 0 8%;
	box-sizing: border-box;
	font-size: 5vw;
}
.mealCategory ul.mealInfo li {
	width: 100%;
	margin-bottom: 20px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}
.mealCategory ul.mealInfo li div.item01,
.mealCategory ul.mealInfo li div.item02,
.mealCategory ul.mealInfo li div.item03{
	line-height: 1;
}
.mealCategory ul.mealInfo li div.item01{
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.mealCategory ul.mealInfo li div.item01 img {
	width: 100%;
}
.mealCategory ul.mealInfo li {
	margin-top: 20px;
}
.mealCategory ul.mealInfo .meal-title {
	font-size: 6vw;
	margin-bottom: 5px;
	color: #6a4ab8;
}
.mealCategory ul.mealInfo li div.item02 {
	width: 100%;
}
.mealCategory ul.mealInfo .meal-col, .mealCategory ul.mealInfo .meal-note {
	margin-bottom: 3px;
}
.mealCategory ul.mealInfo .meal-col {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 15px;
}
.mealCategory ul.mealInfo .meal-col .label {
	font-weight: bold;
	flex: 0 0 100%;
	text-align: left;
}
.mealCategory ul.mealInfo .meal-col > div:nth-child(2) {
	width: 50%;
}
.mealCategory ul.mealInfo .meal-col > div span {
	font-weight: normal;
	color: #333;
	padding: 0 0 0 10px;
}
.mealCategory ul.mealInfo .meal-note {
	display: flex;
}
.mealCategory ul.mealInfo .meal-note .label {
	font-weight: bold;
	padding: 0 10px 0 0;
	flex: 0 0 11vw;
}
.mealCategory ul.mealInfo .meal-note .note {
	font-weight: normal;
	color: #333;
}

.reserveTab {
	display: flex;
	padding: 0 5%;
}
.reserveTab a {
	width: 50%;
	color: #727c87;
	font-size: 6vw;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	border-bottom: 2px solid #babfc4;
	margin-bottom: 20px;
	padding-bottom: 5px;
}
.reserveTab a.active {
	color: #3b065d;
	border-bottom: 2px solid #3b065d;
	opacity: 1;
}