/* 共用元素 */
 :root {
     /* 主色 */
     --c-bg-red: #761529;
     --c-bg-brown: #988054;
     --c-bg-brownlight: #EBDBBA;
     --c-bg-write: #FFFFFF;
     /* 輔助色 */
     --c-bg-blue: #E8F0FE;
     --c-bg-gray: #9E9E9E;
     --c-bg-graydeep: #474747;
     --c-bg-deep: #202020;
     --c-bg-blacklight: #18191A;
     --c-bg-black: #000000;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: "Microsoft JhengHei", "微軟正黑體", arial, "黑體-繁", "Heiti TC", "儷黑 Pro", "LiHei Pro", sans-serif;
 }

 *:focus {
     outline: none;
 }

 html {
     /* font-size: 16px; */
     height: 100%;
     scroll-behavior: smooth;
     overflow: -moz-hidden-unscrollable;
     /*注意！若只打 hidden，chrome 的其它 hidden 會出問題*/
     height: 100%;
     font-family: "Microsoft JhengHei", "微軟正黑體", arial, "黑體-繁", "Heiti TC", "儷黑 Pro", "LiHei Pro", sans-serif;
     font-family: "Microsoft JhengHei", "微軟正黑體", "LiHei Pro", "儷黑 Pro", arial, "黑體-繁", "Heiti TC", sans-serif;
 }

 input[type="button"] {
     -webkit-appearance: none;
 }

 /* 為隱藏 Datalist 箭號，將之透明度設為 0 */
 input::-webkit-calendar-picker-indicator {
     opacity: 0;
 }

 body {
     background-image: url('../images/bg.png');
     z-index: 22;
     background-repeat: repeat;
     background-attachment: fixed;
     background-position: center;
     overflow-y: scroll;
     overflow-x: hidden;
     -ms-overflow-style: none;
     height: 100%;
     overflow: auto;
     scroll-behavior: smooth;
     font-family: "Microsoft JhengHei", "微軟正黑體", arial, "黑體-繁", "Heiti TC", "儷黑 Pro", "LiHei Pro", sans-serif;
     position: relative;
 }

 /* body::-webkit-scrollbar {
    display: none;
} */

 ul, li {
     list-style: none;
 }

 a {
     text-decoration: none;
     cursor: pointer;
     color: var(--c-bg-write) !important;
 }

 img {
     width: 100%;
 }

 .hamListText {
     margin-bottom: 0rem;
 }

 /* start */
 header {
     max-width: 768px;
     width: 100%;
     height: 47px;
     margin: 0 auto;
     /* position: absolute;
	top: 0;
	left: 0;
	position: fixed; */
     z-index: 10;
 }

 .headContain {
     position: relative;
 }

 #menu_ctr {
     position: absolute;
     top: -100px;
 }

 .menu_ctr {
     width: 25px;
     height: 25px;
     position: absolute;
     right: 15px;
     top: 15px;
     cursor: pointer;
     position: absolute;
     z-index: 99999;
     /* left: calc( 100% - 300px ); */
 }

 .menu_ctr:before {
     content: '';
     width: 25px;
     height: 4px;
     background-color: var(--c-bg-write);
     display: block;
     position: absolute;
     top: 10px;
     left: 0;
     box-shadow: 0px 8px 0 var(--c-bg-write), 0px -8px 0 var(--c-bg-write);
     border-radius: 3px;
     transition: .5s;
 }

 #menu_ctr:checked~nav .menu_list {
     top: 0px;
 }

 .menu_list {
     width: 100%;
     /* height: calc( 100vh - 45px); */
     height: 100vh;
     background-color: var(--c-bg-brown);
     position: absolute;
     top: -1400px;
     left: 0;
     transition: top 0.9s;
     display: inline-block;
     vertical-align: middle;
     z-index: 55555;
 }

 .menu_list>li {
     padding: 15px 95px;
     text-align: center;
 }

 .menu_list>li:first-child {
     margin-top: 10px;
 }

 .menu_list a {
     text-shadow: 1px 1px 5px rgba(36, 36, 36, 0.493);
     text-align: left;
     text-decoration: none;
     color: var(--c-bg-write);
     font-size: 16px;
     line-height: 20px;
     /* border-bottom: 2px solid #aaa; */
     padding-bottom: 5px;
     font-family: "Microsoft JhengHei";
 }

 @media screen and (max-width:500px) {
     .menu_list>li {
         padding: 15px 20px;
     }
 }

 .menuPic {
     width: 90%;
     margin: 90px auto 50px;
 }

 .menu_items {
     text-align: center;
     box-sizing: border-box;
     letter-spacing: 5px;
     margin: auto;
 }

 .liPic {
     width: 30px;
     margin: 10px;
     -webkit-filter: drop-shadow(1px 1px 5px rgba(36, 36, 36, 0.493));
     filter: drop-shadow(1px 1px 5px rgba(36, 36, 36, 0.493))
 }

 li a {
     display: flex;
     justify-content: flex-start;
     align-items: center;
 }

 .logo {
     position: absolute;
     top: 15px;
     left: 15px;
     z-index: 2000;
 }

 .logo img {
     width: 25px;
     height: 25px;
 }

 /* 按鈕 */
 .readMore {
     width: 75%;
     height: 40px;
     margin: auto;
     background-color: var(--c-bg-brownlight);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     text-align: center;
     color: var(--c-bg-black);
     letter-spacing: 1.5px;
     border: var(--c-bg-brownlight);
 }

 .readMore>p {
     font-size: 16px;
     text-align: center;
     color: var(--c-bg-black);
     letter-spacing: 1.5px;
     margin-bottom: 0rem;
 }

 .editBtn {
     width: 60px;
     height: 22px;
     border: none;
     border-radius: 2px;
     background: var(--c-bg-brown);
     color: var(--c-bg-write);
     font-size: 16px;
 }

 .deleteBtn {
     width: 60px;
     height: 22px;
     border: none;
     border-radius: 2px;
     background: var(--c-bg-red);
     color: var(--c-bg-write);
     margin-left: 10px;
     font-size: 16px;
 }

 .lightBtn {
     width: 30%;
     height: 34px;
     background-color: var(--c-bg-brownlight);
     border: var(--c-bg-brownlight);
     border-radius: 2px;
     font-size: 15px;
     color: var(--c-bg-black);
     margin-right: 5px;
     cursor: pointer;
 }

 .brownBtn {
     width: 30%;
     height: 34px;
     background-color: var(--c-bg-brown);
     border: var(--c-bg-brown);
     border-radius: 2px;
     font-size: 15px;
     color: var(--c-bg-write);
     text-decoration: none;
 }

 .popupRedBtn {
     width: 148px;
     height: 30px;
     border: none;
     background: var(--c-bg-red);
     color: var(--c-bg-write);
     font-size: 16px;
     margin-top: 40px;
     border-radius: 2px;
 }

 .popupBtnArea {
     display: flex;
     justify-content: center;
     position: fixed;
     bottom: 0px;
     right: 50%;
     transform: translate(50%, -50%);
 }

 .popupGrayBtn {
     width: 148px;
     height: 30px;
     border: none;
     background: var(--c-bg-graydeep);
     color: var(--c-bg-write);
     font-size: 16px;
     margin-top: 40px;
     border-radius: 2px;
 }

 .searchPhoneBtn {
     width: 80px;
     height: 40px;
     background: var(--c-bg-brown);
     color: var(--c-bg-write);
     border-radius: 3px;
     border: none;
     font-size: 16px;
     margin-left: 5px;
     cursor: pointer;
 }

 .pointBtn {
     width: 100%;
     height: 40px;
     margin: auto;
     background-color: var(--c-bg-brownlight);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     text-align: center;
     color: var(--c-bg-black);
     letter-spacing: 1.5px;
     border: var(--c-bg-brownlight);
 }

 .pointBtn>p, .countText {
     margin-bottom: 0rem;
 }

 .signupBtn {
     width: 75%;
     height: 40px;
     margin: auto;
     background-color: var(--c-bg-gray);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     text-align: center;
     color: var(--c-bg-write);
     letter-spacing: 1.5px;
     border: var(--c-bg-brownlight);
 }

 input[type=button] {
     line-height: 0%;
     font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }

 /* 搜尋欄 */
 .searchBar {
     width: 75%;
     height: 40px;
     background: var(--c-bg-blue);
     border: var(--c-bg-blue);
     position: relative;
     display: flex;
 }

 .searchIcon {
     width: 10%;
     height: 40px;
     margin-right: 10px;
 }

 .searchBar>input {
     width: 75%;
     height: 40px;
     background: var(--c-bg-blue);
     border: var(--c-bg-blue);
 }

 .searchPhone::placeholder {
     font-weight: 400;
     font-size: 16px;
     text-align: left;
     letter-spacing: 0em;
 }

 .Icon {
     font-size: 24px;
     color: var(--c-bg-graydeep);
     position: absolute;
     left: 3px;
     top: calc(50% - 0.5em);
 }

 .editInput {
     display: flex;
     flex-direction: column;
 }

 .editInput>input {
     width: 75%;
     height: 40px;
     background: var(--c-bg-blue);
     border: var(--c-bg-blue);
     margin: 0px auto;
     margin-top: 20px;
     text-align: center;
     border-radius: 4px;
 }

 /* 首頁 */
 .wrap {
     width: 100%;
     max-width: 768px;
     margin: 0 auto;
     height: 70vh;
     overflow-y: scroll;
 }

 #cenPic {
     width: 200px;
     margin: 20px auto;
 }

 .style-line {
     width: 90%;
     height: 4px;
     background-color: var(--c-bg-brown);
     margin: 40px auto 10px;
     box-shadow: 2px 2px 8px var(--c-bg-black);
 }

 h2 {
     color: var(--c-bg-write);
     font-size: 22px !important;
     letter-spacing: 0.2em !important;
     text-align: center;
     font-weight: normal !important;
 }

 .style-line2 {
     width: 90%;
     height: 4px;
     background-color: var(--c-bg-brown);
     margin: 20px auto 10px;
     box-shadow: 2px 2px 8px #000;
 }

 .mainCont {
     margin: 35px auto 40px;
     text-align: center;
     color: var(--c-bg-write);
     font-size: 20px;
     letter-spacing: 1.5px;
     text-align: center;
     line-height: 24px;
 }

 .mainCont p {
     margin: 20px;
 }

 .mainList {
     margin-top: 20px;
     color: var(--c-bg-write);
     font-size: 16px;
 }

 .mainList p {
     margin-top: 10px;
 }

 .mainContent {
     margin-top: 20px;

 }

 .mainCont2 {
     margin: 20px auto;
     text-align: center;
     color: var(--c-bg-write);
     font-size: 18px;
     letter-spacing: 1.5px;
     text-align: center;
 }

 .mainText {
     color: var(--c-bg-write);
     font-size: 20px;
     letter-spacing: 1.5px;
     text-align: center;
 }

 .mainText span {
     color: var(--c-bg-brownlight);
     font-weight: bold;
     margin-bottom: 0px;
 }

 .locationShop p {
     color: var(--c-bg-write);
     font-size: 16px;
     line-height: 1.4em;
     margin-top: 20px;
     display: flex;
     justify-content: center;
 }

 .shopText {
     font-weight: bold;
 }

 .math {
     font-size: 50px;
     margin: 0 5px;
 }

 .footWork {
     width: 100%;
     /* max-width: 768px; */
     margin: auto;
     height: 65px;
     /* background-color: #8f7248; */
     position: fixed;
     bottom: 0;
 }

 .footContain {
     max-width: 768px;
     margin: 0 auto;
     background-color: var(--c-bg-brown);
 }

 .footContain ul {
     display: flex;
     justify-content: center;
     justify-content: space-around;
     align-content: center;
     position: relative;
     padding-left: 0px;
 }

 .footContain ul li {
     margin: 10px;
 }

 .footContain ul li img {
     width: 45px;
 }

 .qrBg {
     background-color: var(--c-bg-brownlight);
     width: 70px;
     height: 75px;
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 4px;
 }

 .qrPic {
     width: 60px;
     margin: 8px auto;
     padding: 3px;
     text-align: center;
 }

 /* 活動跳窗 */
 #eventContainer {
     width: 100%;
     position: fixed;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.269);
     z-index: 222222;
     display: none;
 }

 .eventMes {
     width: 300px;
     height: 300px;
     margin: 0 auto;
     background-color: var(--c-bg-write);
     position: absolute;
     top: 30%;
     left: 50%;
     transform: translate(-50%, -50%);
     overflow-y: scroll;
 }

 .eventPic {
     display: flex;
     margin: 10px auto 0;
     align-items: center;
 }

 .eventPic img {
     width: 40px;
     margin: 0px 20px;
 }

 .eventPic p {
     font-size: 18px;
 }

 .eventTxt {
     margin: 20px 25px 10px;
     color: #0d0d0d;
     letter-spacing: 1px;
     line-height: 1.4;
 }

 .eventMore {
     background-color: var(--c-bg-red);
     width: 60%;
     height: 35px;
     margin: 20px auto 20px auto;
     color: var(--c-bg-write);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
 }

 #closeBtn {
     position: absolute;
     top: 10%;
     left: 89%;
     transform: translate(-50%, -50%);
     cursor: pointer;
 }

 #closeVideoBtn img {
     width: 30px;
 }

 .event_window_line {
     width: 100%;
     height: 4px;
     background-color: var(--c-bg-brown);
     margin: 10px auto;
 }

 /* 小手機 */
 @media screen and (max-width:330px) {
     #cenPic {
         width: 150px;
         margin: 20px auto;
     }

     .mainCont p {
         margin: 15px;
     }

     .style-line {
         margin: 30px auto 5px;
     }
 }


 /* 明細查詢 */

 .tab {
     width: 75%;
     font-size: 16px;
     color: var(--c-bg-deep);
     margin: 0px auto;
 }

 .tab-group {
     list-style: none;
     margin-bottom: 20px;
     padding-left: 0rem !important;
 }

 .tab-group:after {
     content: "";
     display: table;
     clear: both;
 }

 .tab-group li a {
     display: block;
     text-decoration: none;
     padding: 12px;
     background: var(--c-bg-brown);
     color: var(--c-bg-write) !important;
     font-size: 16px;
     float: left;
     width: 50%;
     text-align: center;
     cursor: pointer;
     transition: 0.5s ease;
 }

 .tab-group li a:hover {
     background: var(--c-bg-brownlight);
     color: var(--c-bg-deep) !important;
 }

 .tab-group .active a {
     background: var(--c-bg-brownlight);
     color: var(--c-bg-deep) !important;
 }

 .tab_content {
     display: none;
 }

 .tab_content.show {
     display: block;
 }

 .tab_content p {
     font-size: 18px;
 }


 .tab_content2 {
     display: none;
 }

 .tab_content2.show {
     display: block;
 }

 .tab_content2 p {
     font-size: 16px;
 }

 .readMore1 {
     margin: 20px auto;
 }

 .readMore2 {
     margin: 20px auto;
 }

 .readMore3 {
     margin-top: 40px;
 }

 .yellowText {
     color: var(--c-bg-brownlight);
     font-weight: bold;
 }

 /* 明細查詢表格 */
 .dataTitle {
     font-size: 16px;
     margin-top: 20px;
     color: var(--c-bg-write);
     display: flex;
     justify-content: flex-start;
 }

 .dateSelect span {
     align-self: center;
 }


 .dateSearch {
     display: flex;
     align-items: center;
 }

 .dateSelect {
     width: 75%;
     justify-content: center;
     margin: 0px auto;
 }

 .startDate, .endDate {
     width: 30%;
     height: 32px;
     margin: 10px 5px;
     font-size: 15px;
     padding-left: 3px;
 }

 .dateSelect input {
     vertical-align: middle;
 }

 .search_btn_area {
     width: 25%;
     height: 34px;
     background-color: var(--c-bg-brown);
     border-radius: 2px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 15px;
     color: var(--c-bg-write);
     margin: 0px 5px;
     border: none;
 }

 table {
     font-size: 16px;
     letter-spacing: 0px;
     margin: auto;
 }

 tr {
     /* padding-bottom: 5px; */
     border-bottom: var(--c-bg-brown) 2px solid !important;
 }

 th, td {
     width: 85%;
     padding: 4px;
     text-align: left;
 }

 .tab1 {
     padding: 8px;
 }

 /* 活動說明 */
 #eventMES {
     text-align: left;
     letter-spacing: 1.5px;
 }

 .style-line3 {
     width: 100%;
     height: 2px;
     background-color: var(--c-bg-brownlight);
     margin: 20px auto;
     box-shadow: 2px 2px 8px var(--c-bg-black);
 }

 .style-line4 {
     width: 75%;
     height: 2px;
     background-color: var(--c-bg-brownlight);
     margin: 20px auto;
     box-shadow: 2px 2px 8px var(--c-bg-black);
 }

 /* 會員登入頁 */
 #loginBody {
     background-color: var(--c-bg-deep);
     background-image: none;
 }

 #cenPic1 {
     width: 250px;
     margin: 40px auto 20px;
 }

 #memberTitle {
     margin: 20px auto;
 }

 .loginWrap {
     height: 90vh;
 }

 .memberInput {
     width: 75%;
     height: 40px;
     margin: 20px auto 0;
     background-color: var(--c-bg-blue);
     border: var(--c-bg-blue);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     text-align: center;
     border-radius: 4px;
 }

 /* 下拉選單 */
 .selectGray {
     width: 75%;
     height: 40px;
     margin-bottom: 20px;
     background-color: var(--c-bg-blue);
     border: var(--c-bg-blue);
     text-align: center;
     font-size: 16px;
     color: var(--c-bg-gray);
     border-radius: 4px;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     background-image: url("../images/svg/VectorGray.svg");
     background-position: right 0.5em top 50%, 0 0;
     background-repeat: no-repeat;
 }

 .selectBrown {
     width: 100%;
     height: 40px;
     margin: 10px auto 0;
     background-color: var(--c-bg-write);
     border: var(--c-bg-write);
     text-align: left;
     font-size: 14px;
     color: var(--c-bg-black);
     border-radius: 4px;
     margin-bottom: 10px;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     background-image: url("../images/svg/VectorBrown.svg");
     background-position: right 0.5em top 50%, 0 0;
     background-repeat: no-repeat;
 }

 .selectBrownlight {
     width: 100%;
     height: 40px;
     margin: 10px auto 0;
     background-color: var(--c-bg-brownlight);
     border: var(--c-bg-brownlight);
     text-align: left;
     font-size: 14px;
     color: var(--c-bg-black);
     border-radius: 4px;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     background-image: url("../images/svg/VectorBrown.svg");
     background-position: right 0.5em top 50%, 0 0;
     background-repeat: no-repeat;
 }

 .selectShort1 {
     width: 100%;
     height: 40px;
     margin: 10px auto 0;
     background-color: var(--c-bg-write);
     border: none;
     border-right: 1px solid var(--c-bg-gray);
     text-align: left;
     font-size: 14px;
     color: var(--c-bg-black);
     border-radius: 4px 0px 0px 4px;
     margin-bottom: 10px;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     background-image: url("../images/svg/VectorBrown.svg");
     background-position: right 0.5em top 50%, 0 0;
     background-repeat: no-repeat;
 }

 .selectShort2 {
     width: 100%;
     height: 40px;
     margin: 10px auto 0;
     background-color: var(--c-bg-write);
     border: none;
     text-align: left;
     font-size: 14px;
     color: var(--c-bg-black);
     border-radius: 0px 4px 4px 0px;
     margin-bottom: 10px;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     background-image: url("../images/svg/VectorBrown.svg");
     background-position: right 0.5em top 50%, 0 0;
     background-repeat: no-repeat;
 }

 .selectSearch {
     width: 100%;
     height: 40px;
     margin: 10px auto 0;
     background-color: var(--c-bg-write);
     border: var(--c-bg-write);
     text-align: left;
     font-size: 14px;
     color: var(--c-bg-black);
     border-radius: 4px;
     margin-bottom: 10px;
     appearance: none;
     -moz-appearance: none;
     -webkit-appearance: none;
     background-image: url("../images/svg/search.svg");
     background-position: right 0.5em top 50%, 0 0;
     background-repeat: no-repeat;
     padding-left: 10px;
 }

 .selectSearch::placeholder {
     text-align: left;
 }

 select {
     padding-left: 10px;
 }

 .member {
     width: 75%;
     height: 40px;
     margin: 10px auto 0;
     background-color: var(--c-bg-blacklight);
     border: var(--c-bg-blacklight);
     display: flex;
     justify-content: center;
     align-items: center;
     color: var(--c-bg-write);
     font-size: 16px;
     text-align: center;
     border-radius: 4px;
 }

 /* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
 ::-webkit-input-placeholder {
     color: rgba(204, 204, 204, 0.5);
     font-weight: 400;
     font-size: 16px;
     text-align: center;
     letter-spacing: 0.3em;
 }

 /* Firefox 4-18 */
 :-moz-placeholder {
     color: rgba(204, 204, 204, 0.5);
     font-weight: 400;
     font-size: 16px;
     text-align: center;
     letter-spacing: 0.3em;
 }

 /* Firefox 19-50 */
 ::-moz-placeholder {
     color: rgba(204, 204, 204, 0.5);
     font-weight: 400;
     font-size: 16px;
     text-align: center;
     letter-spacing: 0.3em;
 }

 /* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
 :-ms-input-placeholder {
     color: rgba(204, 204, 204, 0.5) !important;
     font-weight: 400 !important;
     font-size: 16px !important;
     text-align: center !important;
     letter-spacing: 0.3em !important;
 }

 /* Edge (also supports ::-webkit-input-placeholder) */
 ::-ms-input-placeholder {
     color: rgba(204, 204, 204, 0.5);
     font-weight: 400;
     font-size: 16px;
     text-align: center;
     letter-spacing: 0.3em;
 }

 /* CSS Working Draft */
 ::placeholder {
     color: var(--c-bg-graydeep);
     font-weight: 400;
     font-size: 16px;
     text-align: center;
     letter-spacing: 0.1em;
 }


 .check {
     display: flex;
     display: -ms-flexbox;
     padding: 0px 10px 15px;
     align-items: center;
     justify-content: center;
 }

 /* checkbox樣式 */
 .checkbox {
     display: flex;
 }

 .check-box-style {
     width: 18px;
     height: 18px;
     position: relative;
     border-radius: 4px;
     margin: 6px 0px;
 }

 .check-box-style label {
     width: 16px;
     height: 16px;
     cursor: pointer;
     position: absolute;
     left: 1px;
     top: 1px;
     background-color: var(--c-bg-blue);
     border-radius: 4px;
 }

 .check-box-style label::after {
     background-image: url(../images/svg/checkbox.svg);
     width: 14px;
     height: 14px;
     position: absolute;
     top: 0px;
     left: 0px;
     background: var(--c-bg-red);
     opacity: 0;
     border-radius: 4px;
     color: var(--c-bg-write);
 }

 .check-box-style input[type="checkbox"] {
     visibility: hidden;
 }

 .check-box-style input[type="checkbox"]:checked+label {
     background-image: url(../images/svg/checkboxChecked.svg);
     background-repeat: no-repeat round;
 }

 /* checkbox樣式 */
 #storesCheckboxesDiv {
     width: 75%;
     display: flex;
     justify-content: flex-start;
     margin-left: 13%;
     flex-wrap: wrap;
 }

 .checkboxTitle {
     width: 75%;
     line-height: 21px;
     color: var(--c-bg-gray);
     font-size: 12px;
     margin: 20px auto 10px;
 }

 .checkboxText {
     line-height: 30px;
     color: var(--c-bg-gray);
     font-size: 12px;
     text-align: center;
     margin: 0px 10px;
 }

 .a-white {
     color: var(--c-bg-write);
     font-size: 14px;
 }

 .redBtn {
     -webkit-appearance: none;
     width: 75%;
     height: 40px;
     margin: 10px auto 0;
     background-color: var(--c-bg-red);
     border: var(--c-bg-red);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 16px;
     text-align: center;
     color: var(--c-bg-write);
     letter-spacing: 0.3em;
     cursor: pointer;
     border-radius: 4px;
     /* box-shadow: 0 9px #999; */
 }

 .redBtn:active {
     /* background-color: #3e8e41; */
     box-shadow: 0 5px rgb(27, 27, 27);
     transform: translateY(4px);
 }

 #normal_mode li label {
     margin: 0px auto 8px;
     font-size: 16px;
     letter-spacing: 2px;
     color: var(--c-bg-gray);
 }

 .form-label {
     margin: 0px auto 8px;
 }

 /* 商品知識 */
 .product {
     margin: 30px auto 50px;
 }

 .productPic img {
     width: 15%;
 }

 .productTitle {
     margin: 20px auto;
     position: relative;
     width: 85%;
 }

 .productTitle:before {
     content: " ";
     width: 10%;
     height: 1px;
     position: absolute;
     top: 9px;
     left: 0px;
     background-color: var(--c-bg-write);
 }

 .productTitle:after {
     content: " ";
     width: 10%;
     height: 1px;
     position: absolute;
     top: 9px;
     right: 0px;
     background-color: var(--c-bg-write);
 }

 .productMes {
     margin: 10px auto;
     width: 85%;
 }

 .productMes p {
     margin: 5px auto;
     font-size: 16px;
     text-align: left;
     letter-spacing: 1.5px;
 }

 .productTxt {
     display: flex;
     margin: 0 auto;
 }

 .productLeft {
     width: 35%;
 }

 .productRight {
     width: 65%;
 }

 .productLeft1 {
     width: 35%;
 }

 .productRight1 {
     width: 65%;
 }

 .productLeft2 {
     width: 35%;
 }

 .productRight2 {
     width: 65%;
 }

 /* tab start */


 /* tab end */


 /*gotop start*/
 .go_top {
     position: fixed;
     bottom: -25px;
     right: 17%;
     width: 10px;
     height: 147px;
     text-align: center;
     display: none;
     z-index: 33333;
     transition: all 0.15s ease-out;
 }

 .go_top img {
     filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .5));
 }

 /*gotop end*/

 footer {
     width: 100%;
     margin: 0 auto;
     background-color: #000;
     color: var(--c-bg-write);
     margin-top: 84px;
     padding: 0 0 30px;
 }

 .fContainer1 {
     display: flex;
 }

 .fContainer1 p {
     width: 20%;
     margin: 30px 15px 15px 10px;
 }

 .fContainer1 .fConRig1 {
     width: 80%;
 }

 .fContainer1 img {
     margin: 30px 0 15px;
 }

 .fContainer1 li:nth-child(2) {
     padding-top: 5px;
 }

 .fContainer2 {
     display: flex;
     margin-top: 30px;
 }

 .fContainer2 p {
     float: left;
     width: 20%;
     margin: 0 15px 20px 10px;
 }

 .fContainer2 img {
     margin: 0 0 20px;
 }

 .fContainer2 li:nth-child(2) {
     padding-top: 5px;
 }

 .fContainer3 {
     display: block;
 }

 .FCon1 {
     display: flex;
     margin: 15px 10px;
 }

 .FCon1 p {
     padding: 0 20px;
 }

 p.marginless {
     margin: 8px 0;
 }

 #show_meg {
     margin: 0 0 20px 0;
 }

 .text-left {
     text-align: left;
 }

 .red-text {
     color: var(--c-bg-red);
 }

 .thirtyDayTxt {
     color: var(--c-bg-brownlight);
     font-weight: bold;
 }

 .shopName {
     color: var(--c-bg-write);
     font-size: 16px;
     font-weight: bold;
     text-align: left;
     /* margin-top: 20px;
     margin-bottom: 10px; */
 }

 .tableName {
     color: var(--c-bg-write);
 }

 .tableBtn {
     display: flex;
     justify-content: flex-end;
 }

 .userList {
     /* 覆寫 Bootstrap */
     caption-side: top;
     width: 75%;
 }

 #searchErrorMessage {
     /* width: 21%; */
     color: var(--c-bg-write);
     font-size: 12px;
     margin: 5px;
     text-align: end;
     display: none;
     margin-bottom: 0rem;
 }

 .shopList {
     display: flex;
     flex-direction: column;
     color: var(--c-bg-write);
     border: none;
 }

 .resource {
     width: 85%;
     display: flex;
     flex-direction: column;
     margin: 0px auto;
 }

 .resource2 {
     color: var(--c-bg-write);
     text-align: center;
     letter-spacing: 1.5px;
     width: 85%;
     display: flex;
     flex-direction: column;
     margin: 0px auto;
 }

 .resourceText {
     color: var(--c-bg-write);
     margin-top: 20px;
     line-height: 1.4em;
     font-size: 16px;
 }

 .resourceContent {
     color: var(--c-bg-write);
     line-height: 1.4em;
     font-size: 16px;
     margin-bottom: 20px;
 }

 .resourceTitle {
     color: var(--c-bg-write);
     font-weight: bold;
     line-height: 20px;
 }

 .resourceBtn {
     width: 90%;
     display: flex;
     justify-content: flex-end;
     margin: 0px auto;
 }

 .resourceImage {
     height: 150px;
     object-fit: cover;
     overflow: hidden;
 }

 .popupWindow {
     /* z-index: 10; */
     width: 310px;
     height: 310px;
     background: var(--c-bg-write);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, 50%);
 }

 .popupWindow2 {
     width: 310px;
     height: 500px;
     background: var(--c-bg-write);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, 15%);
 }

 #closeIcon {
     position: absolute;
     width: 24px;
     right: 20px;
     top: 20px;
 }

 .popupContent {
     position: relative;
     width: 280px;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     overflow: auto;
 }

 .popupContent2 {
    position: relative;
    width: 280px;
    height: 70%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
}

 .popupTitle {
     width: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     /* margin-top: 30px; */
     margin-bottom: 20px;
     font-size: 16px;
 }

 .popupTitle2 {
     width: 150px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 30px;
     margin-bottom: 20px;
     font-size: 16px;
 }

 .fixedPopupTitle2 {
     position: fixed;
     top: 2%;
     right: 50%;
     transform: translate(20%, 0%);
 }

 .TitleIcon {
     width: 30px;
     height: 30px;
     margin-right: 10px;
 }

 .popupShop {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: 16px;
 }

 .popupNewEvent {
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 16px;
 }

 .shopShow {
     font-weight: bold;
 }

 .allget {
     color: var(--c-bg-write);
 }

 .recordTable {
     width: 75%;
     margin: 0px auto;
 }

 .recordTableTitle {
     width: 75%;
     margin: 20px auto 0px;
 }

 .cli-table {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
 }

 .cli-table th {
     font-size: 14px;
 }

 .cli-table tr {
     color: var(--c-bg-write);
     font-size: 12px;
 }


 .cli-table tr td {
     word-break: break-all;
 }

 .none-cli-table {
     text-align: center;
 }

 .eventContent {
     width: 75%;
     margin: 20px auto;
 }

 .eventContent p {
     font-size: 16px;
     margin: 15px auto;
     text-align: start;
     line-height: 24px;
 }

 .eventText p {
     white-space: pre;
 }

 .pointContent {
     width: 75%;
     margin: 0px auto;
     text-align: center;
 }

 .pointText {
     color: var(--c-bg-write);
     margin: 10px 0px;
 }

 .pointUserText {
     font-size: 16px;
 }

 .totalPointText {
     font-size: 48px;
 }

 .giveawayContent {
     width: 75%;
     margin: 0px auto;
 }

 .giveawayImage {
     height: 150px;
     overflow: hidden;
     object-fit: cover;
 }

 .giveawayText {
     margin: 20px 0px;
     color: var(--c-bg-write);
     line-height: 22px;
 }

 .giveawayText p {
     font-size: 16px;
     margin-top: 20px;
 }

 /* 計數器 */
 .count {
     width: 100%;
     height: 40px;
     margin: 0px auto;
     background: var(--c-bg-write);
     position: relative;
     display: flex;
     align-items: center;
 }

 .countText {
     margin-left: 10px;
 }


 /* 計數器 */
 input[type="number"] {
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;
 }

 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
 }

 .number-input {
     width: 40%;
     height: 30px;
     background: #e5e5e5;
     position: absolute;
     right: 3%;
     top: 1%;
     transform: translate(1%, 15%);
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-radius: 3px;
 }

 .number-input,
 .number-input * {
     box-sizing: border-box;
 }

 .subtraction {
     width: 30px;
     height: 30px;
     -webkit-appearance: none;
     background: var(--c-bg-graydeep);
     border: none;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     border-radius: 3px;
     font-size: 24px;
     color: var(--c-bg-write);
 }

 .addition {
     width: 30px;
     height: 30px;
     -webkit-appearance: none;
     background: var(--c-bg-brown);
     border: none;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     position: relative;
     border-radius: 3px;
     font-size: 24px;
     color: var(--c-bg-write);
 }

 .number-input input[type=number] {
     max-width: 50px;
     height: 30px;
     border: none;
     font-size: 16px;
     text-align: center;
     background-color: #e5e5e5;
 }

 .countError {
     color: var(--c-bg-red);
     margin-left: 20px;
     margin-bottom: 0rem;
 }

 .applyText, .acceptedText {
     width: 75%;
     color: var(--c-bg-write);
     margin: 10px auto;
 }

 .applyText p, .acceptedText p {
     margin-top: 10px;
     margin-bottom: 0rem;
 }

 /* alert */
 .alertText {
     margin: 10px;
 }

 .eventAlertText {
     width: 160px;
     line-height: 20px;
     text-align: center;
 }

 .eventAlertText2 {
     width: 160px;
     line-height: 20px;
 }

 .newEventText {
     width: 160px;
     line-height: 20px;
 }

 /* 掃描結果*/
 .scanResultText {
     display: flex;
     flex-direction: column;
     align-items: center;
     color: var(--c-bg-write);
     margin-top: 10px;
     height: 130px;
 }

 .scanResultText p {
     margin-top: 10px;
     font-size: 20px;
 }

 .successMessage{
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
 }

 .successMessage span {
    font-size: 40px;
}

#errorMessage{
    width: 75%;
    margin-top: 20px;
    font-size: 20px;
    text-align: center;
    line-height: 20px;
    word-break: break-all;
}

 #errorMessageSmall {
     margin-top: 20px;
     font-size: 16px;
     text-align: center;
     line-height: 20px;
 }

 /* 掃描明細 */
 #more-info {
     margin-bottom: 20px;
     position: relative;
     width: 100%;
     left: 50%;
     transform: translateX(-50%);
     border-radius: 4px;
 }

 #more-info.show {
     display: block;
 }

 .shortSelect {
     display: flex;
     justify-content: center;
 }

 #promptText2 {
     height: 40px;
     border-radius: 4px;
     color: #0d0d0d;
 }

 #promptText3 {
     height: 40px;
     border-radius: 4px 0px 0px 4px;
     color: #0d0d0d;
 }

 .choiceDescription2 li {
     color: #868383;
     text-align: left;
 }

 #storeOptions {
     height: 250px;
     overflow-y: scroll;
     z-index: 221;
     width: calc(100% - 40px);
 }

 .item {
     text-align: left;
 }

 .form-group {
     width: 50%;
 }

 .form-group4 {
     width: 100%;
 }

 .fontBig {
     margin: 30px 20px;
 }

 #accumulate,
 #scanRecord,
 #mainList {
     position: relative;
 }

 #accumulate::before {
     position: absolute;
     content: '•';
     top: -3px;
     left: 35%;
     color: #fff;
     font-size: 30px;
 }

 #accumulate::after {
     position: absolute;
     content: '•';
     top: -3px;
     right: 35%;
     color: #fff;
     font-size: 30px;
 }

 #scanRecord::before {
     position: absolute;
     content: '•';
     top: -3px;
     left: 35%;
     color: #fff;
     font-size: 30px;
 }

 #scanRecord::after {
     position: absolute;
     content: '•';
     top: -3px;
     right: 35%;
     color: #fff;
     font-size: 30px;
 }

 .listDate {
     margin-right: 20px;
 }

 .listProduct {
     margin-right: 90px;
 }

 #welcome2, textarea {
     display: none;
 }

 .ui-datepicker-calendar {
     display: none;
 }