/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300&display=swap');*/

html,body,.shoppingListBox{height: 100vh;z-index: 999; }
div, p {
    font-size: 14pt;
    line-height: 20pt;
}
/*h4,button,span,div,p,select,textarea,input{font-family: 'Noto Sans TC', sans-serif;font-weight: 100;}*/
h4,button,span,div,p,select,textarea,input{font-family: 'cwTeXYen', sans-serif;font-weight: 100;}

ul li {
    list-style: none;
}
.flex{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.flex .flexItem{flex: 1;text-align: center;}
.contaner {
    width: 80%;
    display: block;
    margin: auto;
    padding: 10px;
}
.progrp {
    padding: 10px;
}
.progrp ul {
    text-align: left;
    border: 0px solid #b39178;
    padding: 0;margin: 0;
    padding: 10px;
}
.progrp ul li:first-child {
}
.progrp ul li h4.tit{margin: 0.6rem;}
.progrp ul li {
    line-height: 20pt;
    position: relative;
    text-align: center;
}
.progrp ul li img{
    width:100%;
    display: block;
    margin: auto;
}
.colGray{color: #818181;}
.colOrg{color: #ee8333;}
.colRed{color: #dd0000;}
.colGray2{color: #d4ae81}
.colGrayWhite{color: #e0e0e0;}
.colGray3{color: #818181;}
.btnBox{}
.btnBox::after{}
.btn_blue{border: 0;margin-left: auto;background: #5f4d4a;
    border-radius: 30px;font-family: 'cwTeXYen', sans-serif;font-weight: lighter;
    padding: 2px 10px;color: #fff;min-width: 60%;}
.btn_blue:hover{background: #7e6763;}
.cost{color: #a5a5a5;text-decoration: line-through;font-size: 0.8em;}
.costDiscont{padding-left:5px;color: #ee8333;font-size: 1.2em;margin: 0.3rem;}


.pgpage{display:block;margin:auto;padding-top:10px;padding-bottom:10px;}
.lastpg,.nextpg{width:15px;display:inline-block;vertical-align: top;
    border-radius: 2px;padding-top: 4px;margin:0 5px;}
.lastpg img,.nextpg img{width: 100%;}
.pgpage a.a1{display:inline-block;width:30px;height:30px;color:#78BCC1;line-height:30px;border:1px solid rgba(120, 188, 193,0.6);
    text-align: center;
    border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; 
    -o-border-radius:20px;}
.pgpage a.aclick{background:#78BCC1;color:#fff;}

.pgpage a.a1:hover{background:rgba(120, 188, 193,0.7);color:#fff;cursor:pointer;}
.iconNav{position: fixed;bottom:50px;right:2px;width: 60px;height: 60px;z-index: 9999;}
.iconNav img{width: 40px;cursor: pointer;}
.iconNavList{position: absolute;display: ;bottom: 45px;right: 0;}
.iconNav .goTop{position: absolute;bottom: 0;right: 0;}
.iconNavList img{display: block;}

/**購物清單**/
.shoppingListBox{position: absolute;top: 0;left: 0;width: 100%;background: rgba(255,255,255,0.6);
    height:100vh;display: none;}
.shoppingContaner{display: block;margin: auto;width: 50%;background: #181818;position: relative;}
#indexModalContaner{width:70%;}
.shoppingListBox h3.shoppingTit{text-align: center;padding: 0.8em 0;margin: 0;font-size:2.2rem;font-weight:normal;}
.shoppingContaner hr{margin:auto;margin-bottom:30px;width:90%}
.shoppingTitGrp{background: #f4f4f4;color: #707070;margin-bottom:20px;}
.shoppingTitGrp h5{margin: 0.5em 0;font-weight:lighter;}
.shoppingTitle{background: #f4f4f4;color: #707070;margin-bottom:20px;}
.shoppingTitle h5{margin: 0.5em 0;font-weight:lighter;}
.shoppingPro{padding: 10px;}
.shoppingPro input{display: inline-block;width: 100px;}
.shoppingPro input.btnIcon{border-radius: 2px;border: 1px solid #eee;padding: 0 5px;text-align: center;width: 30px;}
.flex .flexItem img{width: 100px;}
.lineBtm{border-bottom: 1px solid #eee;padding-bottom: 20px;}
.shoppingDiv{}
.flex .shoppingDiscount{flex: 0.6;padding-left: 40px;}
.flex .shoppingTotal{flex: 0.4;padding-left: 10px;}
.txt1{border: 1px solid #e0e0e0;border-radius: 5px;padding-left: 2px;height:40px;}
.txt1::placeholder{color:#e0e0e0;}
.btnShopping{background: #b42b34;border-radius: 5px;color: #fff;border: 0;
    padding:4px 20px;}
.btnShopping:hover{background: #AC1B24;}
.shoppingProTotalGrp{padding-top: 0.5rem;}
.shoppingTotal .total{font-size: 1.2em;}
.shoppingNote{padding:10px 80px 20px 80px}
.shoppingBtnGrp{display: block;margin:auto;text-align: center;}
.txtS{font-size: 0.9em;}
.closeBtn{
	border: 0px;
	border-radius: 20px;
	width: 30px;
	height:30px;
	color: #fff;
    text-align: center;
    position: absolute;
    top:20px;
    right: 35px;
    background-color: #707070;
    font-size: 0.8rem;
}
.closeBtn:hover{background: #ffc343;}
.shoppingFormGrp.flex{justify-content: flex-start;}
.shoppingFormGrp .formTit{flex:none;padding: 5px 10px;min-width: 100px;}
.shoppingFormGrp .formTxt{padding: 5px;flex: 1;margin: 0 5px 0 0;}
.shoppingFormGrp .formTxt .txt1{width: 100%;padding: 10px;border-radius: 5px;}
#shoppingSuccess .shoppingContanerTxt{min-height: 400px;padding: 20px;}
/**購物清單**/

@media only screen and (max-width: 600px){
    .progrp{padding: 20px;}
    .contaner{width: 95%;}
}
@media only screen and (max-width: 500px){
    .progrp{padding: 20px;}
    .shoppingContaner{width: 100%;}
    .shoppingTitGrp{display: none;}
    .shoppingPro input{width: 130px;}
    .flex .flexItem:nth-of-type(2){flex: none;}
    .flex .flexItem{flex: none;}
    .shoppingDiscount label{display: block;}
    .flex .shoppingDiscount{padding-left: 20px;}
    .shoppingFormGrp .formTit{min-width: 80px;}
    .flex .shoppingDiscount,.flex .shoppingTotal{flex: none;width: 100%;}
    .flex .shoppingTotal{margin-top:1em;}
}

.justify:after{
	content: "";
  	display:inline-block;
 	width: 100%;
}

.datepicker input::placeholder{
	color:#e0e0e0;
}

.cartFix{
	cursor: pointer;
	position: fixed;
    background-color: #5f4d4a;
    width: 80%;
    height: 60px;
    bottom: 20px;
    left: 10%;
    border-radius: 50px;
    text-align: center;
    z-index: 1;
}

.cartFix p{
	display: flex;
	font-size: 1.5rem;
	height: 60px;
	justify-content:center;
	align-items: center;
	color:white;
}

.cartFix i{
	margin-left: 10px;
	font-size: 2rem;
}

.cartFixNum{
	width: 18px;
    height: 18px;
    line-height: 20px;
    border-radius: 3em;
    background: #D8D1C1;
    font-size: 1rem;
    position: relative;
    right: 8px;
    bottom: 20px;
    color: #5f4d4a;
}

.subTitleBox{
	width:25%;
}

.subTitle{
	font-family:Poppins;
	font-weight: 600;
	font-size: 1.3rem;
	border-bottom:3px solid #FAA535;
	padding:0 5px 0 5px;
	margin:0 30px 5px 0;
}

.contentTitle{
	font-family:Poppins;
	font-weight:400;
	font-size: 1rem;
	padding:0 5px 0 5px;
	margin:5px 30px 0 0;
}

.unfoldBtn{
	font-size:0.9rem;
	line-height:30px;
	height:30px;
	border-radius:20px;
	text-align:center;
	width:70px;
	background-color:#FAA535;
	color:white;
	cursor: pointer;
	margin:auto;
}

.dialog{
	position:absolute;
	text-align:center;
	width:70%;
	top:16px;
	left:4%;
	background-color:white;
	filter: drop-shadow(0px 0px 5px #cccccc);
	border-radius:10px;
}

.dialogArrow{
    border-color: transparent transparent #fff transparent;
    border-style: solid solid solid solid;
    border-width: 6px 6px 10px 7px;
    top: -16px;
    content: "";
    height: 16px;
    left: 40px;
    position: absolute;
    width: 0px;
}

.memberDialogArrow{
    border-color: transparent #fff transparent transparent;
    border-style: solid solid solid solid;
    border-width: 5px 10px 5px 0px;
    top: 45px;
    content: "";
    height: 10px;
    left: -10px;
    position: absolute;
    width: 0px;
}

#memberDialog{
	position:absolute;
	width:80%;
	height:300px;
	top:-50px;
	left:60px;
	opacity: 0;
	color:#10322C;
}

#couponDialog{
	position:absolute;
	width:100%;
	height:500px;
	top:34px;
}

.couponItem{
	width:85%;
	border-radius:5px;
	border:#E0E0E0 2px solid;
	margin:10px auto 10px auto;
	cursor: default;
}

.couponLeft{
	width:35%;
	text-align:left;
	display:inline-block;
	line-height:20px;
	margin:5px;
	padding:5px;
	border-right:#E0E0E0 1px solid;
}

.couponRight{
	position:relative;
	width:60%;
	display:inline-block;
}

.couponRight .couponContent{
	font-size:1.2rem;
	position:absolute;
	left:20px;
	top:-30px;
	color:#EE8433;
}

.couponRight .couponUse{
	position:absolute;
	border-radius:10px;
	padding:5px 20px 5px 20px;
	font-size:0.9rem;
	right:20px;
	top:-35px;
	border:#E0E0E0 1px solid;
	background-color:#D07E98;
	color:white;
	cursor: pointer;
}

.btn_line{border: 0;margin-left: auto;background: #00c300;
    border-radius: 30px;font-family: 'cwTeXYen', sans-serif;font-weight: lighter;
    padding: 2px 10px;color: #fff;min-width: 60%;margin-bottom: 10px}
.btn_line:hover{background: #00e000;}

.btn_fb{border: 0;margin-left: auto;background: #1877F2;
    border-radius: 30px;font-family: 'cwTeXYen', sans-serif;font-weight: lighter;
    padding: 2px 10px;color: #fff;min-width: 60%;margin-bottom: 10px}
.btn_fb:hover{background: #3185f2;}

.receiverForm{
	width:60%;
}

.mobileDevice{
	display: none;
}

.mobileDeviceFlex{
	display: none;
}

/*#couponBtn{
	color:#EE8433;
	border:#EE8433 1px solid;
	padding:5px 20px;
	margin:0 0 40px 40px;
	cursor:pointer;
}*/

#couponBtn{
    background: #AC1B24;
    border-radius: 5px;
    color: #fff;
    border: 0;
    padding: 4px 20px;
	margin:0 0 40px 40px;
	cursor:pointer
}

.addrZipCode{
	padding: 10px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    margin-right: 10px;
    margin-bottom: 5px;
    height:40px;
}

#headerOption{
	font-size: 1.4rem;
}

#headerOption a{
	text-decoration:none;
}

#navbarSupportedContent{
	font-size: 1.4rem;
}

@media screen and (max-width: 768px) {

	#headerOption{
		font-size: 1.2rem;
	}

	#navbarSupportedContent{
		font-size: 1.2rem;
	}

	#headerIcon{
		margin-left: 5px;
	}

	.shoppingContaner{width: 100%;}
	#indexModalContaner{width:90%;}
	.receiverForm .formTit{flex:0.9;}
	.receiverForm .formTxt{flex:3.5;}
	.receiverForm{width:90%;}
	.shoppingNote{padding:40px 30px 10px 30px;}
	.dialog, #couponDialog{width:95%;}
	.pcDevice{display: none;}
	.mobileDevice{display: inline-block !important;}
	.mobileDeviceFlex{display: flex !important;}

	.couponLeft{
		width:35%;
		margin:0px;
	}

	.couponRight{width:55%;}
	.couponItem{width:95% !important;}
	.couponContent{font-size: 1rem !important;left:0px !important;}
	.couponTit{font-size: 0.9rem}

	.couponUse{
		right:0px !important;
		padding:5px 10px 5px 10px !important;
	}

	.orderList{
		font-size:0.7rem !important;
	}
}

.mobileLoginTips{display: none;}

@media screen and (max-width: 900px) {

	.pcLoginTips{display: none;}
	.mobileLoginTips{display: inline-block !important;}
}

.eInvoiceInput{
	width:150px;
}

.nav-link{
	color: #f5f1e1 !important;
}

.nav-link:hover{
	color: #f6b24d !important;
}

.nav-link.active{
	color: #f6b24d !important;
}