/* ======================== all page css start ======================== */
@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
*{padding: 0px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;word-wrap:break-word;word-wrap:break-word;-ms-overflow-style: none;scrollbar-width: none;}
*:before,*:after{margin: 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;word-wrap:break-word;word-wrap:break-word; -ms-overflow-style: none;scrollbar-width: none;}
* ::-webkit-scrollbar {display: none;}
/*=============*/
/*=============*/
html{font-size:16px;font-style:normal;word-wrap:break-word;padding: 0;margin: 0;height: 100%;width: 100%;}
body{font-family:Arial,'Noto Sans TC','Apple LiGothic Medium','Microsoft JhengHei','SimHei';width:100%;height:100%;font-size: 16px;background-color: #2B2B2B;}
img{width: 100%;max-width: 100%;}
a{cursor:pointer}
a:hover,a:focus{text-decoration: none;/* text-shadow: 0px 0px 7px #c1c1c1; */}
input:focus,textarea:focus{box-shadow:none;outline:0}
button:focus{outline: 0;}
input:focus,textarea:focus{box-shadow:none;outline:0}
ol, ul {list-style: none;margin-bottom: 0;}

.element { pointer-events: none; }
/* ========================  all page css  end  ======================= */



/*===================member start=========================*/
/*======login page start======*/
.loginbg_div{max-width:768px;background-color:#068862;display:block;height:740px;justify-content:center;margin:0 auto;background:url(../images/bg.png)center center no-repeat;background-size:cover;padding:10px}
.login_header{font-size:21px;letter-spacing:2.76px;color:#006231;text-align:center;padding:10px}
.login_logo{width:220px;height:95px;background-color:antiquewhite;background:url(../images/logo.svg)center center no-repeat;margin:0 auto 50px;background-size:cover}
.div_logininfo{width:300px;padding:10px;margin: 0px auto;}
.div_logininfo span{display:block;font-size:20px;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:1px;color:#ffffff;text-align:center}
.div_logininfo span a{color:#ffffff}
.div_logininfo label{font-size:15px;font-weight:500;font-stretch:normal;font-style:normal;line-height:normal;letter-spacing:2.5px;color:#ffffff;padding:10px 35px 12px;position:relative}
.div_logininfo .input_form{margin:0 auto 40px}
.div_logininfo .input_form .text-input:nth-child(1) label:before{content:"";width:25px;height:22px;position:absolute;top:10px;left:0;background:url(../../assets/images/ic_cellphone_white.svg)center center no-repeat;background-size:contain}
.div_logininfo .input_form .text-input:nth-child(2) label:before{content:"";width:25px;height:22px;position:absolute;top:10px;left:0;background:url(../../assets/images/ic_captcha_white.svg)center center no-repeat;background-size:contain}
.div_logininfo .input_form input{height:45px;border-radius:3px;font-weight:300;width:100%;padding:7px 20px 7px;background:#fff;color:#144e32;font-size:15px;border:none;border-bottom:1px solid #999}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}
/* Firefox */
input[type=number] {-moz-appearance: textfield;}

.div_logininfo .verification_text{color:#fff906;text-align:left;padding:5px;letter-spacing:0.7px;font-size:13px;display:block}
.sendbtn:hover{box-shadow:none;background-color:#333333;box-shadow:0 2px 14px 0 #0a3000}
.login_modal .modal-dialog{margin-top:90px}
.login_modal .modal-content h4{font-size:18px;letter-spacing:1px;text-align:center;color:#3a3a3a;padding:20px 0}
.login_modal .modal-header{border:0;padding:30px 0 0}
.login_modal .modal-body{font-size:14px;letter-spacing:0.93px;text-align:center;color:#7a7a7a;padding:0 15px 15px 15px}
.login_modal .modal-footer{display:flex;flex-wrap:wrap;border:0;justify-content:center;padding:0 15px 30px}
.login_modal .modal-footer span{padding:0 10px 0 24px}
.sendbtn{font-size:17px;font-weight:400;letter-spacing:2.4px;color:#ffffff;width:100%;height:46px;border-radius:6px;border:0;transition:0.5s;margin:0 0 20px;background-color:#000000}
.sendbtn.lightgreen{box-shadow:0 2px 14px 0 #07941a;background-color:#5da813}
.sendbtn.lightgreen:hover{box-shadow:none;background-color:#63ca00}
.sendbtn.darkgreen{box-shadow:0 2px 14px 0 #668b6b;background-color:#006232}
.sendbtn.darkgreen:hover{box-shadow:none;background-color:#00804b}
.sendbtn.white{box-shadow:none;background-color:#ffffff;color:#006232}
.sendbtn.white:hover{box-shadow:0 2px 14px 0 rgba(255,255,255,0.65);background-color:#ffffff}
.sendbtn.green{
    background-color: #2daf3d;
}
.sendbtn.red{
    background-color: #c13600;
}
.login_modal .modalbtn{width:60%;height:35px;border-radius:3px;font-size:14px;letter-spacing:0.93px;text-align:center;color:#f8f8f8;padding:8px 0;position:relative;margin:10px 0;width:160px;margin:10px 40px}
.login_modal .modalbtn.lightgreen{box-shadow:0 2px 14px 0 #15b82b;background-color:#5da813}
.login_modal .modalbtn.lightgreen:before{content:"";width:20px;height:20px;position:absolute;top:8px;left:15px;background:url(../../assets/images/ic_back.svg)center center no-repeat;background-size:contain}
.login_modal .modalbtn.darkgreen{box-shadow:0 2px 14px 0 #085c14;background-color:#006232}
.login_modal .modalbtn.darkgreen:before{content:"";width:20px;height:20px;position:absolute;top:8px;left:15px;background:url(../../assets/images/ic_shop.svg)center center no-repeat;background-size:contain}
/*======login page end======*/


/*======qrcode page start======*/
.qrcodebg_div{max-width:768px;background-image:linear-gradient(to bottom,rgba(48,84,67,0.8),#123121);background-image:linear-gradient(to bottom,rgba(111,152,133,0.74),#123121);display:block;height:740px;justify-content:center;margin:0 auto;padding:0}
.qrcode_header{font-size:19px;letter-spacing:2.76px;color:#ffffff;text-align:center;padding:10px;margin-top: 20px;}
.qrcode_nav{max-width:768px;height:56px;background-image:linear-gradient(to bottom,rgba(0,0,0,0.75) 1%,rgba(0,0,0,0.54))}
.qrcode_img{width:230px;margin: 10px auto 30px;/* margin-top:10px; */}

.qrcode_nav a{width:120px;height:56px;font-size:15px;line-height:2;letter-spacing:1.5px;text-align:center;color:#ffffff;text-decoration:underline;padding:16px 0 7px;position:relative}

.membercenter_btn{width:100%;display:flex;justify-content:flex-end;align-items:center;position:relative;max-width:280px;margin:0 auto}
.membercenter_btn a{width:120px;height:56px;font-size:15px;line-height:2;letter-spacing:1.5px;text-align:center;color:#ffffff;text-decoration:underline;padding:16px 0 7px;position:relative}
.membercenter_btn a:before{content:"";width:20px;height:20px;position:absolute;top:11px;margin:10px 0;left:5px;background:url(../../assets/images/ic_name_white.svg)center center no-repeat;background-size:contain}



.div_qrcodeinfo{max-width:235px;margin: 10px auto 30px;font-size:16px;line-height:1.76;letter-spacing:1.7px;text-align:center;color:#ffffff;font-weight:300;}

/*======qrcode page end======*/


/*======member center page start======*/
.membercenterbg_div{max-width:768px;background-color:#ffffff;display:block;margin:0 auto;padding:0;height: 1070px;}
.membercenter_nav{max-width:768px;background-color:#ffffff;margin:0 auto;padding:18px 0;width:100%;border-bottom:solid 1px #006231}
.membercenter_nav .nav_header{max-width:305px;position:relative;font-size:22px;letter-spacing:3px;color:#006231;margin:0 auto;padding:0 0 0 10px;display:block}
.membercenter_nav .nav_header:before{content:"";width:30px;height:30px;position:absolute;top:-10px;margin:10px 0;left:0;background:url(../../assets/images/ic_beansbag.svg)center center no-repeat;background-size:contain}
.membercenter_nav .nav_header span{padding-left:30px}
.membercenter_nav .nav_header span:before{}
.membercenterbg_div .div_bonus{max-width:768px;height: 230px;background:url(../images/memberbonus_bg.png)center center no-repeat;background-size:cover;display:flex;width:100%;}
.membercenterbg_div .div_bonus .bonus_list{display:flex;width:50%;color:#ffffff;margin:0;flex-wrap:wrap}
.membercenterbg_div .div_bonus div{max-width:350px;margin:0 auto;width:100%;display:flex;flex-wrap:wrap;padding: 5px 15px 15px 20px;}
.membercenterbg_div .div_bonus .bonus_list li{font-size:15px;font-weight:500;letter-spacing:2.5px;color:#ffffff;width:100%;display:flex;align-items:flex-end;justify-content:center;position:relative}
.membercenterbg_div .div_bonus .bonus_list li:before{content:"";width:20px;height:20px;position:absolute;top:-8px;margin:10px 0;left:-3px;background:url(../../assets/images/ic_coffeebean_white.svg)center center no-repeat;background-size:contain}
.membercenterbg_div .div_bonus .bonus_list span{font-size:25px;color:#ffffff;width:100%;text-align:center}
.membercenterbg_div .div_bonus .bonus_list:nth-child(1){width: 178px;height: 43px;margin: 0 0px 0px 186px;padding: 0px 0px 10px 0px;}
.membercenterbg_div .div_memberinfo{margin:50px auto 0;width:300px;padding:0 0 70px 0}

.div_bonus .bonus_list .qrcode_btn{border-radius:3px;border:solid 1px #ffffff;padding: 0;position:relative;margin:0 10px 0 0;background-color:rgba(107,127,130,0.5);}
.div_bonus .bonus_list .qrcode_btn a{padding: 10px 14px 1px 16px;width: 111px;}
.div_bonus .bonus_list .qrcode_btn:hover{box-shadow:none;}
.div_bonus .bonus_list .qrcode_btn:hover.div_bonus .bonus_list .qrcode_btn a{padding:11px 13px 9px;}
.div_bonus .bonus_list:first-child .qrcode_btn{border-radius:3px;border: 0;padding:0;position:relative;margin: 0 0px 0 0;background-color: #ffffff00;}
.div_bonus .bonus_list:first-child .qrcode_btn a{padding: 7px 0px 5px 0px;}


.div_bonus .bonus_list .qrcode_btn span{font-size:15px;font-weight:500;letter-spacing:2.5px;color:#ffffff;position:relative;display: block;text-align: inherit;}
.div_bonus .bonus_list .qrcode_btn:before{content:"";width:23px;height:20px;position:absolute;top: -3px;margin:10px 0;left: 61px;background:url(../../assets/images/ic_coffee.svg)center center no-repeat;background-size:contain;}
.div_bonus .bonus_list:first-child .qrcode_btn:before{content:"";width: 107px;height: 1px;color: #ffffff;background: #ffffff;top: 16px;left: 1px;}

.div_memberinfo .info_header{font-size:18px;font-weight:400;letter-spacing:3px;color:#ffffff;height:0;border-bottom:40px solid #1f5346;border-right:35px solid transparent;width:240px;position:relative}
.div_memberinfo .info_header:before{content:"";width:23px;height:20px;position:absolute;top:0;margin:10px 0;left:17px;background:url(../../assets/images/ic_member.svg)center center no-repeat;background-size:contain}
.div_memberinfo .info_header span{padding:9px 50px;display:block}
.div_memberinfo .qrcode_btn{border-radius: 5px;width: 120px;text-align: center;margin: 0px 10px 30px 1px;position: relative;/* border: 1px solid #006232; */background-color: #000000;}
.div_memberinfo .qrcode_btn:before{width:23px;height:20px;position:absolute;top: -4px;margin:10px 0;left: 2px;background-size:contain;}
.div_memberinfo .qrcode_btn a{color: #ffffff;letter-spacing: 3px;font-size: 14px;text-decoration: underline;display: block;padding: 5px 3px 5px 3px;}
.div_memberinfo .input_form{margin:35px 0 0;padding:0 20px 0}
.div_memberinfo .input_form .text-input{margin-bottom: 11px;position:relative;}
.div_memberinfo .input_form .text-input a{color:#006231}
.div_memberinfo .input_form input{height:45px;border-radius:3px;font-weight:500;width:100%;padding:7px 20px 7px;background:#fff;color:#144e32;font-size:15px;border:none;border-bottom:1px solid #999;border-radius:3px;border:solid 1px #dedede;background-color:#ffffff}
.div_memberinfo label{font-size:15px;font-weight:400;letter-spacing:2.5px;color:#006232;padding:0 0 3px 29px}
.div_memberinfo .text-input .flatpickr_item a.input-button{border-radius:3px;border:solid 1px #dedede;padding:13px 5px}
.div_memberinfo .input_form input[readonly='readonly'],.input_form input[readonly='readonly'],.input_form input[readonly]{background-color:#e4e4e4;font-size:15px;letter-spacing:0.85px;text-align:right;color:#909090}
.forms--radio .forms__indicator:after{background:#006232}
.div_memberinfo .input_form .flatpickr_item input[readonly='readonly'],.input_form input[readonly='readonly'],.input_form input[readonly]{background-color:#ffffff;color:#006232}
.div_memberinfo .checkbox_nolosist label,.radio_nolosist label{margin-bottom:30px}
.div_memberinfo .input_form .text-input:nth-child(1):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_name_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(2):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_name_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(3):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_cellphone_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(4):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_email_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(5):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_birth_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(6):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_gender_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(7):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_coffeebean_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(8):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_coffeebean_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(9):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_coffeebean_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .input_form .text-input:nth-child(10):before{content:"";width:23px;height:20px;position:absolute;top:-9px;margin:10px 0;left:0;background:url(../../assets/images/ic_record_green.svg)center center no-repeat;background-size:contain}
.div_memberinfo .tag_area{width: calc(100% - 50px);margin: 30px auto 20px 50px;}
.div_memberinfo .tag_area .tag_style{background-color: #1f5a48;color: #ffffff;border-radius: 20px;padding: 2px 10px;margin: 4px 1px;display: inline-block;font-size: 14px;letter-spacing: 1px;}


.login_modal.save_success .modalbtn.darkgreen:before{content:"";width:20px;height:20px;position:absolute;top:8px;left:15px;background:url(../../assets/images/ic_correct_white.svg)center center no-repeat;background-size:contain}
input[type='date']{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}
/*======member center page end======*/


/*======member deposit record page start======*/
.membercenterbg_div.deposit_record{height:auto;min-height: 1000px;}

.membercenter_nav .nav_header.record{max-width:305px;position:relative;font-size:22px;letter-spacing:3px;color:#006231;margin:0 auto;padding:0 0 0 10px;display:block;height: 31px;}
.membercenter_nav .nav_header.record:before{content:"";width:30px;height:30px;position:absolute;top:-10px;margin:10px 0;left:0;background:url(../../assets/images/ic_beansbag.svg)center center no-repeat;background-size:contain;display: none;}
.membercenter_nav .nav_header.record span{padding: 0;}

.record_table{width: 100%;border: 0;}

.record_table tr th{padding: 10px;font-weight: 500;letter-spacing: 1px;font-size: 15px;}
.record_table tr td{padding: 10px;}
.record_table thead{background-color: #1f5346;color: #ffffff;}
.record_table tbody{border: 0;}
.record_table tbody tr{font-size: 16px;letter-spacing: 0.5px;}
/*======member deposit record end======*/
/*===================member end=========================*/




/*===================shop start=========================*/
/*======shop login page start======*/
.div_logininfo .input_form .text-input:nth-child(1) label:before{content:"";width:25px;height:22px;position:absolute;top:10px;left:0;background:url(../../assets/images/ic_shop.svg)center center no-repeat;background-size:contain}
.div_logininfo .input_form .text-input:nth-child(2) label:before{content:"";width:25px;height:22px;position:absolute;top:10px;left:0;background:url(../../assets/images/ic_password_white.svg)center center no-repeat;background-size:contain}
/*======shop login page end======*/


/*======member search page start======*/
.membersearchbg_div{max-width:768px;background-color:#068862;display:block;height:740px;justify-content:center;margin:0 auto;background:url(../images/membersearch_bg.png)center center no-repeat;background-size:cover;padding:0 0 100px 0}
.div_logininfo .login_out_btn{margin-bottom: 70px;text-align: right;text-decoration: underline;}
.div_logininfo .login_out_btn a{color: #ffffff;padding: 10px;}

/*======member search page end======*/


/*======search results page start======*/
.div_searchresults_bg{background-color:rgba(255,255,255,0.9);padding:10px 0}
.list_searchresults{}
.list_searchresults li{height:60px;background-color:#ffffff;margin:0 0 5px 0;border-top:solid 1px #006231;list-style:none}
.list_searchresults li a{padding:15px 0;width:100%;display:block;margin:0 auto;font-size:17px;line-height:1.76;letter-spacing:1.7px;text-align:center;color:#545454}
.list_searchresults li a span.results_name{padding:0 100px 0 0}
.list_searchresults li a span.results_cellphone{}
.search_btn{width:300px;margin:50px auto 30px;position:relative}
/*======search results page end======*/


/*======member deposit page start======*/
.membercenter_nav a{width:60px;height:32px;border-radius:2px;box-shadow:0 2px 13px 0 rgba(24,121,66,0.5);border:solid 1px #006231;background-color:#006231;display:block;float:right;font-size:15px;letter-spacing:2.5px;color:#ffffff;text-align:center;padding:5px 0;position:relative}
.membercenter_nav a.nav_back{}
.membercenter_nav a.nav_back:before{content:"";width:0;height:0;border-width:16px;border-style:solid;border-color:transparent #006231 transparent transparent;position:absolute;left:-32px;top:-1px;border-radius:1px}
.membercenter_nav a.nav_back:after{content:"";display:inline-block;width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(-135deg);position:absolute;left:0;top:11px}
.div_memberdeposit{max-width: 768px;background-color:#068862;display:block;justify-content:center;margin:0 auto;background:url(../images/memberdeposit_bg.png)center center no-repeat;background-size:cover;padding:0 0 100px 0;}
.div_memberdeposit .div_memberinfo{margin: 0 auto 170px;padding: 0;}
.div_memberdeposit .div_memberinfo .input_form{margin: 20px 0 20px;padding: 0 20px 0px;}
.div_memberdeposit .text-input span{font-size:15px;letter-spacing:2.5px;color:#006232;padding-left:29px;font-weight:400;display: block;}
.div_memberdeposit .div_deposit{max-width:350px;margin:0 auto;padding:0 40px}
.div_memberdeposit .div_deposit label{font-weight:500;letter-spacing:2.5px;color:#ffffff;padding:10px 0 12px 29px;position:relative}
.div_memberdeposit .div_deposit label:before{content:"";width:23px;height:20px;position:absolute;top:0;margin:10px 0;left:0;background:url(../../assets/images/ic_coffeebean_white.svg)center center no-repeat;background-size:contain}
.div_deposit .input_form input{height:45px;border-radius:3px;font-weight:300;width:100%;padding:7px 20px 7px;background:#fff;color:#144e32;font-size:15px;border:none;border-bottom:1px solid #999}

/*======member deposit page end======*/


/*======deposit success start======*/
.depositsuccessbg_div{max-width:768px;display:block;height:740px;justify-content:center;margin:0 auto;padding:70px 0;background:url(../images/depositsuccess_bg.png)center center no-repeat;background-size:cover}
.depositsuccessbg_div .deposit_info{width:250px;margin:0 auto}
.depositsuccessbg_div .deposit_info .depositsuccess_name{font-size:19px;letter-spacing:2.76px;color:#ffffff;text-align:center;padding:10px}
.depositsuccessbg_div .deposit_info .depositsuccess_text{max-width:235px;margin:30px auto;font-size:16px;line-height:1.76;letter-spacing:1.7px;text-align:center;color:#ffffff;font-weight:300}
.depositsuccessbg_div .deposit_info .depositsuccess_amount{font-size:19px;letter-spacing:2.76px;color:#ffffff;text-align:center;padding:10px;margin:20px 0 60px 0}
.depositsuccessbg_div .deposit_info .depositsuccess_amount p{font-size:30px;font-weight:700;letter-spacing:3.6px;color:#ffffff}
a.record_backbtn{box-shadow: none;border: 0;background-color: #ffffff;float: left;width: 210px;color: blue;font-size: 22px;letter-spacing: 3px;color: #006231;padding: 0;}
a.record_backbtn:after{content:"";display:inline-block;width:9px;height:9px;border-top: 2px solid #006232;border-right: 2px solid #006232;transform:rotate(-135deg);position:absolute;left:0;top:11px;}

/*======deposit success end======*/
/*===================shop end=========================*/

/* ================================================================ */
/* ==                                                            == */
/* ==                        Footer CSS Start                    == */
/* ==                                                            == */
/* ================================================================ */
footer{position:fixed;bottom:0;font-size:12px;font-weight:300;letter-spacing:0.75px;color:#ffffff;width:100%;text-align:center}
.footer_info{max-width:768px;margin:0 auto;background-color:#1b3a2b}
/* ================================================================ */
/* ==                                                            == */
/* ==                        footer CSS end                      == */
/* ==                                                            == */
/* ================================================================ */